/* =============================================
   CONFERÊNCIA MULHERES PLENAS '26 — estilos
   Identidade oficial: coração de três pétalas e quatro cores
   (tijolo, terracota, nude e rosado), com toques de papel e colagem.
   Mobile first. Pontos de quebra: 768px (tablet) e 1024px (desktop).
   ============================================= */

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

:root {
    /* paleta oficial */
    --tijolo: #85351E;
    --terracota: #B8684F;
    --nude: #DFB9A6;
    --rosado: #F5E8E2;

    /* tons de apoio derivados da paleta */
    --papel: #FBF5F2;
    --texto: #4A2116;
    --tijolo-escuro: #3E1A10;

    /* tipografia */
    --fonte-titulo: 'Fraunces', Georgia, serif;
    --fonte-faixa: 'Bebas Neue', 'Arial Narrow', sans-serif;
    --fonte-mao: 'Caveat', 'Segoe Script', cursive;
    --fonte-texto: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;

    /* medidas */
    --lateral: clamp(16px, 5vw, 72px);
    --nav-altura: 72px;
    --ease-saida: cubic-bezier(0.22, 1, 0.36, 1);
    --sombra-papel: 0 14px 30px rgba(62, 26, 16, 0.16);

    /* granulado de papel e borda rasgada, em SVG embutido */
    --textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .52 0 0 0 0 .21 0 0 0 0 .12 .14 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --rasgo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V14L1152 22L1110 12L1062 25L1016 15L968 27L924 13L876 21L830 10L784 24L740 16L692 28L646 14L600 22L552 11L508 25L460 15L414 27L368 12L322 21L276 9L230 23L184 14L138 26L92 12L46 20L0 11Z'/%3E%3C/svg%3E");
}

/* overflow-x: clip, e não hidden: hidden transforma o body num contêiner de
   rolagem e quebra o position: sticky da galeria */
html {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--papel);
    color: var(--texto);
    font-family: var(--fonte-texto);
    line-height: 1.55;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

/* granulado de papel por cima de tudo */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 500;
    pointer-events: none;
    background-image: var(--textura);
    opacity: 0.5;
}

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

a {
    color: inherit;
}

button {
    font: inherit;
    color: inherit;
}

body.sem-rolagem {
    overflow: hidden;
}

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

/* o anel é de quem navega pelo teclado: o clique de mouse não deve deixá-lo
   preso no elemento (alguns navegadores tratam link clicado como focus-visible) */
:focus:not(:focus-visible) {
    outline: none;
}

.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Lenis */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

/* =============================================
   ELEMENTOS DA IDENTIDADE
   ============================================= */

/* serifa arredondada, na mesma família de desenho da logo */
.titulo {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-variation-settings: "SOFT" 100, "WONK" 1;
    letter-spacing: -0.02em;
    line-height: 0.95;
    color: var(--tijolo);
}

/* faixa de papel recortado com o texto em caixa-alta */
.faixa {
    display: inline-block;
    /* folga no topo para caber o acento das maiusculas (CONFERENCIA) sem cortar */
    padding: 0.2em 0.24em 0.08em;
    background: var(--terracota);
    color: var(--papel);
    font-family: var(--fonte-faixa);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    white-space: nowrap;
    clip-path: polygon(0 5%, 4% 0, 52% 4%, 96% 0, 100% 6%, 99% 94%, 95% 100%, 48% 96%, 3% 100%, 0 93%);
}

.faixa--tijolo {
    background: var(--tijolo);
    color: var(--rosado);
}

.faixa--nude {
    background: var(--nude);
    color: var(--tijolo);
}

.faixa--papel {
    background: var(--papel);
    color: var(--tijolo);
}

.script {
    font-family: var(--fonte-mao);
    font-weight: 700;
    line-height: 1;
    color: var(--terracota);
}

.highlight {
    font-family: var(--fonte-titulo);
    font-style: italic;
    font-weight: 700;
    font-variation-settings: "SOFT" 100, "WONK" 1;
    color: var(--tijolo);
}

/* ramos de folhas decorativos */
.folha {
    position: absolute;
    pointer-events: none;
    fill: var(--terracota);
    color: var(--terracota);
}

.folha--traco {
    fill: none;
    color: var(--nude);
}

/* borda de papel rasgado no topo da seção, na cor da seção anterior */
.rasgado {
    position: relative;
}

.rasgado::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    z-index: 2;
    height: clamp(16px, 3vw, 34px);
    pointer-events: none;
    background: var(--anterior, var(--papel));
    -webkit-mask: var(--rasgo) 0 0 / 100% 100% no-repeat;
    mask: var(--rasgo) 0 0 / 100% 100% no-repeat;
}

/* Caixa de foto ou vídeo. Se o arquivo não existir, o script adiciona
   .is-missing e a caixa mostra o rótulo no lugar da imagem quebrada. */
.midia {
    position: relative;
    overflow: hidden;
    background:
        repeating-linear-gradient(135deg, rgba(133, 53, 30, 0.06) 0 10px, transparent 10px 20px),
        var(--rosado);
}

.midia > img,
.midia > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.midia.is-missing > img,
.midia.is-missing > video {
    display: none;
}

.midia.is-missing::after {
    content: attr(data-rotulo);
    position: absolute;
    left: 12px;
    bottom: 10px;
    right: 12px;
    font: 700 0.68rem/1.2 var(--fonte-texto);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(133, 53, 30, 0.55);
}

/* =============================================
   BOTÃO
   ============================================= */
.btn-cta {
    --btn-fundo: var(--tijolo);
    --btn-texto: var(--rosado);
    --btn-sombra: var(--terracota);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 54px;
    padding: 14px 32px;
    border-radius: 999px;
    background: var(--btn-fundo);
    color: var(--btn-texto);
    box-shadow: 4px 5px 0 var(--btn-sombra);
    text-align: center;
    text-decoration: none;
    transition: transform 0.25s var(--ease-saida), box-shadow 0.25s var(--ease-saida);
}

.btn-cta:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 7px 0 var(--btn-sombra);
}

.btn-cta:active {
    transform: translate(2px, 3px);
    box-shadow: 1px 1px 0 var(--btn-sombra);
}

.btn-cta-text {
    display: block;
    font-weight: 700;
    font-size: clamp(0.85rem, 3.4vw, 1rem);
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.btn-cta--claro {
    --btn-fundo: var(--rosado);
    --btn-texto: var(--tijolo);
    --btn-sombra: var(--tijolo-escuro);
}

/* =============================================
   ENTRADA — abertura de ~5s a cada acesso
   O script inline no <head> liga html.entrada-ativa; o script.js anima e
   remove. Sem a classe, a abertura nem aparece.
   ============================================= */
.entrada {
    display: none;
}

html.entrada-ativa,
html.entrada-ativa body {
    overflow: hidden;
}

html.entrada-ativa .entrada {
    position: fixed;
    inset: 0;
    z-index: 450;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--tijolo);
    color: var(--rosado);
    transition: opacity 0.4s ease;
}

/* o coração do hero só aparece quando o da abertura pousa nele */
html.entrada-ativa .hero-coracao .petala img {
    opacity: 0;
}

/* manchas de luz que passeiam pelo fundo */
.entrada-luz {
    position: absolute;
    width: 90vmax;
    height: 90vmax;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
}

.entrada-luz-1 {
    left: -30vmax;
    top: -35vmax;
    background: radial-gradient(circle, rgba(184, 104, 79, 0.6) 0%, transparent 60%);
}

.entrada-luz-2 {
    right: -35vmax;
    bottom: -40vmax;
    background: radial-gradient(circle, rgba(223, 185, 166, 0.3) 0%, transparent 60%);
}

/* clarão de cada batida do coração */
.entrada-clarao {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 38%, rgba(245, 232, 226, 0.4) 0%, transparent 55%);
    opacity: 0;
    pointer-events: none;
}

/* ramos que se desenham nos cantos */
.entrada-ramo {
    position: absolute;
    width: auto;
    height: min(46vh, 420px);
    aspect-ratio: 120 / 260;
    max-width: none;
    color: var(--nude);
    opacity: 0.6;
    pointer-events: none;
}

.entrada-ramo path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.entrada-ramo-1 {
    left: -3%;
    bottom: -5%;
    rotate: 22deg;
}

.entrada-ramo-2 {
    right: -3%;
    top: -5%;
    rotate: 202deg;
}

/* no celular a coluna é estreita: ramos menores e bem nos cantos, para não
   passarem por trás do nome e do anel */
@media (max-width: 767.98px) {
    .entrada-ramo {
        height: min(24vh, 200px);
        opacity: 0.45;
    }

    .entrada-ramo-1 {
        left: -8%;
        bottom: -3%;
    }

    .entrada-ramo-2 {
        right: -8%;
        top: -3%;
    }
}

/* pétalas, pontos e brilhos no ar — por cima dos pixels, para a explosão
   final voar sobre a landing */
.entrada-particulas {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    max-width: none;
    pointer-events: none;
}

.entrada-flutua {
    position: absolute;
    inset: 0;
}

.entrada-nome-wrap {
    position: relative;
    margin: 16px 0 4px;
    line-height: 0;
}

/* "caneta" de luz que acompanha o nome sendo escrito */
.entrada-caneta {
    position: absolute;
    top: -8%;
    bottom: -8%;
    left: 0;
    width: 3px;
    margin-left: -1.5px;
    border-radius: 3px;
    background: var(--rosado);
    box-shadow: 0 0 16px 5px rgba(245, 232, 226, 0.6), 0 0 42px 14px rgba(223, 185, 166, 0.35);
    opacity: 0;
    pointer-events: none;
}

/* precisa da mesma especificidade da regra acima, senão o fundo tijolo
   continua cobrindo a página e o canvas não mostra os pixels se desfazendo */
html.entrada-ativa .entrada.is-dissolvendo {
    background: transparent;
}

.entrada.is-saindo {
    opacity: 0;
}

.entrada-pixels {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-width: none;
    pointer-events: none;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

.entrada-conteudo {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* a composicao inteira tambem obedece a altura da tela: em notebook (600 a
       768px de viewport) o bloco em px fixo passava de 650px e estourava. O vh
       entra no min() de cada peca. */
    --coracao: min(44vw, 250px, 29vh);
    /* folga de topo so para as ondas da batida, que passam 14% da caixa */
    padding: calc(24px + var(--coracao) * 0.08) 24px 24px;
    text-align: center;
}

.entrada-coracao {
    position: relative;
    width: var(--coracao);
    aspect-ratio: 900 / 898;
    margin-bottom: clamp(40px, 10vh, 92px);
    will-change: transform;
}

.entrada-camada,
.entrada-camada img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

/* mesmo ajuste optico do hero: a ponta fina do coracao puxa a massa visual
   para cima, entao ele desce e vai um pouco para a direita dentro do anel de
   palavras. Feito por inset (layout) porque o transform das camadas e do GSAP. */
.entrada-camada {
    inset: 3% -1.5% -3% 1.5%;
}

.entrada-onda {
    position: absolute;
    inset: -14%;
    border: 2px solid var(--nude);
    border-radius: 50%;
    opacity: 0;
}

.entrada-conferencia {
    display: flex;
    margin-right: -0.55em;
    font-weight: 700;
    font-size: clamp(0.72rem, min(3.4vw, 2vh), 1.1rem);
    letter-spacing: 0.55em;
    text-transform: uppercase;
    color: var(--nude);
}

.entrada-conferencia span {
    display: inline-block;
}

.entrada-nome {
    width: min(80vw, 500px, 62vh);
    height: auto;
}

.entrada-ano {
    font-size: clamp(1.7rem, min(10vw, 7vh), 3.8rem);
    color: var(--nude);
    rotate: -6deg;
}

.entrada-pular {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 4;
    padding: 10px 18px;
    border: 1.5px solid rgba(245, 232, 226, 0.45);
    border-radius: 999px;
    background: transparent;
    color: var(--rosado);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, opacity 0.3s;
}

.entrada-pular:hover {
    background: var(--rosado);
    color: var(--tijolo);
}

.entrada.is-dissolvendo .entrada-pular {
    opacity: 0;
}

/* =============================================
   NAVBAR
   ============================================= */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--nav-altura);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--lateral);
    border-bottom: 1px solid transparent;
    transition: background-color 0.3s, border-color 0.3s, transform 0.45s var(--ease-saida);
}

.navbar.is-scrolled {
    background: rgba(251, 245, 242, 0.88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom-color: rgba(133, 53, 30, 0.1);
}

.navbar.is-hidden {
    transform: translateY(-100%);
}

.nav-logo {
    display: block;
    line-height: 0;
}

.nav-logo img {
    width: auto;
    height: 32px;
}

.nav-links {
    display: none;
}

.nav-menu-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    padding: 8px 0;
    border: none;
    background: none;
    cursor: pointer;
}

.r1,
.r2,
.r3 {
    display: block;
    height: 4px;
    border-radius: 4px;
    transform-origin: right center;
    transition: transform 0.25s cubic-bezier(0.77, 0, 0.18, 1);
}

.r1 { width: 30px; background: var(--tijolo); }
.r2 { width: 22px; background: var(--terracota); }
.r3 { width: 34px; background: var(--nude); }

.nav-menu-btn:hover .r2 {
    transform: scaleX(1.4);
}

/* =============================================
   MENU OVERLAY
   ============================================= */
.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    padding: 20px var(--lateral) 40px;
    overflow: hidden;
    background: var(--rosado);
    color: var(--tijolo);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0s linear 0.55s;
}

.menu-overlay.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0s;
}

.menu-overlay-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(var(--nav-altura) - 20px);
}

.menu-overlay-logo {
    width: auto;
    height: 32px;
}

.menu-fechar {
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
    transition: opacity 0.3s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.menu-overlay.is-open .menu-fechar {
    opacity: 1;
    transform: none;
    transition-delay: 0.6s;
}

.menu-overlay-nav {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.menu-overlay-link {
    position: relative;
    display: inline-block;
    align-self: flex-start;
    overflow: hidden;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-variation-settings: "SOFT" 100, "WONK" 1;
    font-size: clamp(2.6rem, 13vw, 5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.menu-overlay-link span {
    display: block;
    padding-right: 0.12em;
    clip-path: inset(0 0 0 100%);
}

.menu-overlay-link::after {
    content: '';
    position: absolute;
    inset: -4px;
    background: var(--nude);
    transform: translateX(115%);
}

.menu-overlay.is-open .menu-overlay-link span {
    animation: textReveal 0.55s cubic-bezier(0.95, 0, 0.95, 1) forwards;
}

.menu-overlay.is-open .menu-overlay-link::after {
    animation: barSweep 0.75s cubic-bezier(0.25, 0, 0.25, 0.8) forwards;
}

.menu-overlay.is-open .menu-overlay-link:nth-child(1) span,
.menu-overlay.is-open .menu-overlay-link:nth-child(1)::after { animation-delay: 0.3s; }
.menu-overlay.is-open .menu-overlay-link:nth-child(2) span,
.menu-overlay.is-open .menu-overlay-link:nth-child(2)::after { animation-delay: 0.42s; }
.menu-overlay.is-open .menu-overlay-link:nth-child(3) span,
.menu-overlay.is-open .menu-overlay-link:nth-child(3)::after { animation-delay: 0.54s; }
.menu-overlay.is-open .menu-overlay-link:nth-child(4) span,
.menu-overlay.is-open .menu-overlay-link:nth-child(4)::after { animation-delay: 0.66s; }

.menu-folha {
    right: -30px;
    bottom: 40px;
    width: 150px;
    height: 325px;
    rotate: -18deg;
    color: var(--terracota);
    opacity: 0.6;
}

.menu-overlay-info {
    position: relative;
    font-family: var(--fonte-mao);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--terracota);
}

@keyframes barSweep {
    0%   { transform: translateX(105%); animation-timing-function: cubic-bezier(0.55, 0, 0.1, 1); }
    38%  { transform: translateX(0%); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
    100% { transform: translateX(-105%); }
}

@keyframes textReveal {
    0%   { clip-path: inset(0 0 0 100%); }
    40%  { clip-path: inset(0 0 0 100%); }
    100% { clip-path: inset(0 0 0 0); }
}

@keyframes girar {
    to { transform: rotate(360deg); }
}

/* =============================================
   HERO
   ============================================= */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    align-items: center;
    padding: calc(var(--nav-altura) + 8px) var(--lateral) 72px;
    overflow: hidden;
    background:
        radial-gradient(55% 45% at 82% 18%, rgba(223, 185, 166, 0.55), transparent 70%),
        radial-gradient(45% 40% at 8% 88%, rgba(251, 245, 242, 0.95), transparent 70%),
        var(--rosado);
}

.hero-folha-1 {
    right: -28px;
    top: 14%;
    width: 100px;
    height: 216px;
    rotate: -22deg;
    color: var(--terracota);
    opacity: 0.55;
}

.hero-folha-2 {
    left: -36px;
    bottom: 4%;
    width: 96px;
    height: 208px;
    rotate: 26deg;
    fill: var(--nude);
    color: var(--nude);
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
}

/* coração da marca: três camadas empilhadas no mesmo quadro */
.hero-coracao {
    position: relative;
    width: min(52vw, 288px);
    aspect-ratio: 900 / 898;
    margin: 28px 0 36px;
}

.hero-halo {
    position: absolute;
    inset: -30%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(223, 185, 166, 0.75) 0%, rgba(223, 185, 166, 0) 62%);
}

.hero-anel {
    position: absolute;
    left: -20%;
    top: -20%;
    width: 140%;
    height: 140%;
    max-width: none;
    animation: girar 48s linear infinite;
}

.hero-anel text {
    font-family: var(--fonte-texto);
    font-weight: 700;
    font-size: 9px;
    fill: var(--tijolo);
    opacity: 0.75;
}

.petala,
.petala-mouse {
    position: absolute;
    inset: 0;
    display: block;
}

/* ajuste optico: a ponta fina do coracao puxa a massa visual para cima,
   entao ele desce e vai um pouco para a direita dentro do anel de palavras.
   Feito por inset (layout) porque o transform das petalas e do GSAP. */
.hero-coracao .petala {
    inset: 3% -1.5% -3% 1.5%;
}

.petala img {
    width: 100%;
    height: 100%;
}

.hero-texto {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* as duas tiras quase se encostam: o recorte de papel ja abre folga */
    gap: 6px 10px;
    margin-bottom: 10px;
}

.hero-topo .faixa {
    filter: drop-shadow(4px 6px 0 rgba(62, 26, 16, 0.18));
    font-size: clamp(1.6rem, 8.4vw, 3.5rem);
    letter-spacing: 0.03em;
    rotate: -3deg;
}

/* a data e uma segunda tira de papel, menor e inclinada para o outro lado,
   encaixada na ponta do nome como um carimbo */
.hero-topo .hero-data {
    align-self: flex-end;
    margin-bottom: 0.35em;
    padding-inline: 0.5em;
    font-size: clamp(0.78rem, 3.5vw, 1.4rem);
    letter-spacing: 0.09em;
    rotate: 2.5deg;
}

.hero-titulo {
    width: min(84vw, 440px);
}

.hero-titulo img {
    width: 100%;
    height: auto;
}

.hero-frase {
    max-width: 24ch;
    margin: 18px 0 14px;
    font-family: var(--fonte-titulo);
    font-style: italic;
    font-weight: 600;
    font-variation-settings: "SOFT" 100, "WONK" 1;
    font-size: clamp(1.2rem, 4.6vw, 1.7rem);
    line-height: 1.2;
    color: var(--tijolo);
}

.hero-info {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 8px 14px;
    margin-bottom: 28px;
}

.hero-local {
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hero-rolar {
    display: none;
}

/* =============================================
   FAIXA CORRENTE
   ============================================= */
.faixa-rolante {
    position: relative;
    z-index: 3;
    /* reta, de ponta a ponta: sem a inclinacao nao ha canto sobrando, entao
       tambem nao precisa das sobras laterais que a cobriam */
    margin: -30px 0;
    padding: 14px 0;
    overflow: hidden;
    background: var(--tijolo);
    color: var(--rosado);
    box-shadow: 0 12px 26px rgba(62, 26, 16, 0.2);
}

.faixa-rolante-trilho {
    display: flex;
    width: max-content;
    animation: rolar 34s linear infinite;
}

.faixa-rolante-grupo {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 28px;
    padding-right: 28px;
}

.faixa-rolante span {
    font-family: var(--fonte-titulo);
    font-style: italic;
    font-weight: 700;
    font-variation-settings: "SOFT" 100, "WONK" 1;
    font-size: clamp(1.3rem, 4.2vw, 2.1rem);
    line-height: 1.2;
    white-space: nowrap;
}

.faixa-rolante .estrela {
    font-family: var(--fonte-texto);
    font-style: normal;
    font-size: clamp(1rem, 3vw, 1.4rem);
    color: var(--nude);
}

@keyframes rolar {
    to { transform: translateX(-50%); }
}

/* =============================================
   VÍDEO DA ÚLTIMA EDIÇÃO
   ============================================= */
.recap {
    position: relative;
    /* O selo do tema sobe 58% para fora da faixa e a polaroid e a ultima
       coisa da secao: o respiro util e medido a partir deles, nao da caixa. */
    padding: clamp(90px, 8.4vw, 120px) var(--lateral) clamp(44px, 5vw, 72px);
    overflow: hidden;
    background: var(--tijolo);
    color: var(--rosado);
    text-align: center;
}

/* TEMA OFICIAL: e o titulo da secao e o bloco de maior impacto dela.
   Um cartaz de papel rosado, recortado a mao e torto ao contrario da
   polaroid, com o coracao de tres petalas montado na borda de cima. O papel
   claro sobre o tijolo e o que cria o contraste — nada de moldura. */
.recap-tema {
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin: 0 auto clamp(56px, 8vw, 92px);
    text-align: center;
}

/* brilho quente por tras do cartaz, para ele descolar do fundo */
.recap-tema::before {
    content: '';
    position: absolute;
    inset: -14% -10%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(223, 185, 166, 0.22) 0%, rgba(223, 185, 166, 0) 68%);
}

.recap-tema-cartaz {
    position: relative;
    z-index: 1;
    display: block;
    padding: clamp(40px, 4.2vw, 54px) clamp(18px, 2.6vw, 44px) clamp(30px, 3.2vw, 40px);
    background: var(--rosado);
    box-shadow: 0 26px 56px rgba(0, 0, 0, 0.32);
    /* mesma tesoura da .faixa, mas com o recorte simetrico dos dois lados:
       assimetrico ele dava a impressao de a faixa estar caindo */
    clip-path: polygon(0 1.4%, 25% 0, 50% 1.3%, 75% 0, 100% 1.4%, 100% 98.6%, 75% 100%, 50% 98.7%, 25% 100%, 0 98.6%);
}

/* Selo redondo com o coracao da marca, montado na borda de cima do cartaz.
   O disco e da cor do papel porque a petala mais escura do simbolo e o
   proprio tijolo do fundo: solto sobre a secao ela sumiria. */
.recap-tema-selo {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: clamp(64px, 6.6vw, 94px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--rosado);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.26);
    transform: translate(-50%, -58%);
}

.recap-tema-selo img {
    width: 56%;
    height: auto;
}

/* Ramos da marca nos cantos da secao. No celular nao cabem sem encostar no
   texto, entao so entram do tablet pra cima. */
.recap-folha {
    display: none;
    z-index: 0;
    fill: var(--nude);
    color: var(--nude);
    opacity: 0.5;
}

@media (min-width: 768px) {
    .recap-folha {
        display: block;
        width: clamp(96px, 9vw, 130px);
        height: clamp(208px, 19.5vw, 282px);
    }

    .recap-folha--esq {
        left: -44px;
        bottom: clamp(60px, 9vw, 130px);
        rotate: 20deg;
    }

    .recap-folha--dir {
        right: -48px;
        top: clamp(150px, 19vw, 240px);
        scale: -1 1;
        rotate: 16deg;
    }
}

/* etiqueta recortada, encaixada na borda de baixo da faixa */
.recap-tema-rotulo {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 2;
    font-size: clamp(0.9rem, 2.4vw, 1.25rem);
    letter-spacing: 0.12em;
    transform: translate(-50%, 50%);
}

.recap-tema-frase {
    display: block;
    text-wrap: balance;
}

/* No celular a frase nao cabe deitada, entao cada oracao vira uma linha.
   Do tablet pra cima elas voltam a correr juntas e a faixa fica fina. */
.recap-tema-linha {
    display: block;
    font-size: clamp(1.65rem, 3.9vw, 3.6rem);
    line-height: 1.06;
    color: var(--tijolo);
    /* os mesmos eixos da logo "Mulheres Plenas": Fraunces no tamanho optico
       maximo, que e onde o contraste grosso/fino e os terminais em bolinha
       aparecem. Sem o opsz fixo o navegador escolhe um valor pelo font-size
       e a letra sai mais seca que a da marca. */
    font-weight: 800;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

/* A palavra-chave de cada linha: e o nome do tema, entao ela sai do tom do
   resto da frase em tres frentes — corpo maior, tinta mais escura que o
   tijolo do redor e o traco nude pintado por tras, o mesmo gesto do
   .sublinhado. So a italica nao segurava o destaque: a terracota e mais
   clara que o tijolo e as palavras vinham mais fracas que a frase. */
.recap-tema-linha em {
    position: relative;
    font-style: italic;
    font-size: 1.12em;
    color: var(--tijolo-escuro);
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

/* o traco fica na altura da barriga da letra e sangra um pouco dos dois
   lados, para parecer marcado a mao e nao um sublinhado de editor */
.recap-tema-linha em::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: -0.09em;
    right: -0.09em;
    bottom: 0.04em;
    height: 0.3em;
    background: var(--nude);
    /* as mesmas pontas irregulares das faixas recortadas do site */
    clip-path: polygon(0 12%, 30% 0, 62% 9%, 100% 2%, 100% 88%, 66% 100%, 28% 92%, 0 100%);
}

/* do tablet pra cima as duas oracoes correm na mesma linha e a faixa fica
   fina. Precisa vir depois da regra acima: mesma especificidade, quem
   estiver por ultimo no arquivo ganha. */
@media (min-width: 768px) {
    .recap-tema-linha {
        display: inline;
    }
}

/* foto polaroid levemente torta */
.recap-thumb {
    position: relative;
    display: block;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: clamp(10px, 1.6vw, 18px) clamp(10px, 1.6vw, 18px) 0;
    border: 0;
    background: var(--papel);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    rotate: -1.5deg;
    transition: rotate 0.5s var(--ease-saida), transform 0.5s var(--ease-saida);
}

.recap-thumb::after {
    content: '';
    position: absolute;
    top: -14px;
    left: 50%;
    width: 140px;
    height: 32px;
    background: rgba(223, 185, 166, 0.85);
    transform: translateX(-50%) rotate(3deg);
}

.recap-thumb:hover {
    rotate: 0deg;
    transform: scale(1.01);
}

.recap-foto {
    display: block;
    aspect-ratio: 16 / 9;
}

.recap-foto img {
    position: absolute;
    inset: 0;
}

.recap-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: clamp(64px, 12vw, 104px);
    height: clamp(64px, 12vw, 104px);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--tijolo);
    box-shadow: 4px 5px 0 var(--terracota);
    transition: transform 0.35s var(--ease-saida);
}

.recap-play::before {
    content: '';
    width: 34%;
    height: 34%;
    margin-left: 8%;
    background: var(--rosado);
    clip-path: polygon(10% 0, 100% 50%, 10% 100%);
}

.recap-thumb:hover .recap-play {
    transform: scale(1.08);
}

.recap-legenda {
    display: block;
    padding: 10px 0 12px;
    font-size: clamp(1.4rem, 4vw, 2rem);
    color: var(--tijolo);
}

/* =============================================
   GALERIA 3D + SOBRE
   ============================================= */
.sobre {
    --anterior: var(--tijolo);
    background: var(--papel);
}

/* A coluna é o trilho da animação: enquanto ela rola, o bloco sticky fica
   parado na tela e as fotos voam para o lugar. */
.galeria-col {
    height: 240vh;
}

.galeria-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}

.galeria-titulo {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-inline: var(--lateral);
    text-align: center;
}

.galeria-titulo .script {
    font-size: clamp(2.4rem, 12vw, 6rem);
    rotate: -6deg;
    margin-bottom: -0.1em;
}

.galeria-titulo .titulo {
    font-size: clamp(3rem, 16vw, 10rem);
}

.galeria-stage {
    position: absolute;
    inset: 0;
    perspective: 900px;
    perspective-origin: 50% 50%;
}

/* cada foto é uma polaroid */
.galeria-card {
    position: absolute;
    display: flex;
    width: 40%;
    aspect-ratio: 4 / 5;
    padding: 6px 6px 22px;
    background: #FFFBF9;
    box-shadow: var(--sombra-papel);
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.galeria-card .midia {
    flex: 1;
}

.galeria-card:nth-child(3n + 1)::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 30%;
    width: 40%;
    height: 20px;
    background: rgba(223, 185, 166, 0.85);
    transform: rotate(-5deg);
}

.galeria-card:nth-child(1) { left: 5%;  top: 12%; }
.galeria-card:nth-child(2) { left: 55%; top: 8%; }
.galeria-card:nth-child(3) { left: 30%; top: 24%; }
.galeria-card:nth-child(4) { left: 2%;  top: 42%; }
.galeria-card:nth-child(5) { left: 58%; top: 38%; }
.galeria-card:nth-child(6) { left: 28%; top: 54%; }
.galeria-card:nth-child(7) { left: 6%;  top: 70%; }
.galeria-card:nth-child(8) { left: 54%; top: 68%; }

/* Entrada das fotos + flutuação leve.
   São animações de CSS que TERMINAM no estado natural da foto: se o
   observador não rodar, se o JS falhar ou se o sistema zerar a duração,
   a foto simplesmente aparece no lugar. Nunca fica invisível. */
.galeria-card:nth-child(1) { --i: 0; --giro:  -6deg; --flut: 7.4s; }
.galeria-card:nth-child(2) { --i: 1; --giro:   5deg; --flut: 8.6s; }
.galeria-card:nth-child(3) { --i: 2; --giro:  -3deg; --flut: 6.8s; }
.galeria-card:nth-child(4) { --i: 3; --giro:   7deg; --flut: 9.2s; }
.galeria-card:nth-child(5) { --i: 4; --giro:  -5deg; --flut: 7.9s; }
.galeria-card:nth-child(6) { --i: 5; --giro:   4deg; --flut: 8.2s; }
.galeria-card:nth-child(7) { --i: 6; --giro:  -7deg; --flut: 6.4s; }
.galeria-card:nth-child(8) { --i: 7; --giro:   6deg; --flut: 8.9s; }

.galeria-stage.is-dentro .galeria-card {
    animation:
        fotoEntra 0.9s var(--ease-saida) backwards,
        fotoFlutua var(--flut, 8s) ease-in-out infinite;
    animation-delay:
        calc(var(--i, 0) * 0.09s),
        calc(0.9s + var(--i, 0) * 0.09s);
}

@keyframes fotoEntra {
    from {
        opacity: 0;
        transform: translateY(46px) scale(0.9) rotate(var(--giro, -4deg));
    }
}

@keyframes fotoFlutua {
    50% { transform: translateY(-9px); }
}

/* o título atrás das fotos respira junto */
.galeria-sticky:has(.is-dentro) .galeria-titulo {
    animation: tituloRespira 11s ease-in-out infinite;
}

@keyframes tituloRespira {
    50% { transform: scale(1.04); }
}

.about {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 2.6vw, 30px);
    max-width: 760px;
    margin-inline: auto;
    padding: 72px var(--lateral) 96px;
    text-align: center;
}

/* Abertura em duas vozes: a afirmacao em Fraunces, com os eixos da logo, e
   o eco manuscrito logo abaixo. */
.about-abre {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 1.2vw, 12px);
    margin-bottom: clamp(4px, 1.4vw, 14px);
}

.about-abre-forte {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    font-size: clamp(1.75rem, 4.6vw, 2.9rem);
    letter-spacing: -0.02em;
    line-height: 1.04;
    color: var(--tijolo);
    text-wrap: balance;
}

.about-abre-eco {
    font-size: clamp(1.5rem, 3.6vw, 2.2rem);
    color: var(--terracota);
}

.about-text {
    font-weight: 500;
    font-size: clamp(1.1rem, 2.6vw, 1.35rem);
    line-height: 1.5;
}

.about-text .highlight {
    font-size: 1.12em;
}

/* Fecho: a frase que fica. Bloco nude recortado a mao, na mesma tesoura das
   faixas do site. */
.about-fecho {
    max-width: 640px;
    margin-top: clamp(6px, 1.6vw, 16px);
    padding: clamp(18px, 3vw, 26px) clamp(20px, 4vw, 38px);
    background: var(--nude);
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    font-size: clamp(1.15rem, 2.8vw, 1.5rem);
    line-height: 1.35;
    color: var(--tijolo);
    text-wrap: balance;
    clip-path: polygon(0 1.6%, 25% 0, 50% 1.4%, 75% 0, 100% 1.6%, 100% 98.4%, 75% 100%, 50% 98.6%, 25% 100%, 0 98.4%);
}

.about-fecho em {
    font-style: italic;
    color: var(--tijolo-escuro);
}

.about .btn-cta {
    margin-top: 12px;
}

/* =============================================
   REVELAÇÃO DE TEXTO (linha a linha)
   Montada pelo script em todo elemento com [data-revelar].
   ============================================= */
.reveal-ready {
    position: relative;
    overflow: hidden;
    padding-block: 0.08em;
}

.reveal-word {
    display: inline-block;
}

.reveal-ready .reveal-word {
    clip-path: inset(0 0 0 100%);
}

.reveal-ready.is-revealed .reveal-word {
    animation: textReveal 1.1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    animation-delay: var(--atraso, 0s);
}

.reveal-barra {
    position: absolute;
    left: 0;
    width: 100%;
    background: var(--nude);
    transform: translateX(105%);
    pointer-events: none;
}

.is-revealed .reveal-barra {
    animation: barSweep 1.1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    animation-delay: var(--atraso, 0s);
}

/* =============================================
   O QUE TE ESPERA
   Lista editorial: número, título em caixa-alta e uma linha de
   explicação, separados por fios pontilhados da identidade.
   ============================================= */
.espera {
    position: relative;
    overflow: hidden;
    /* o fecho e o botao ja dao respiro: o rodape da secao e mais curto que o topo */
    padding: clamp(72px, 9vw, 120px) var(--lateral) clamp(44px, 5vw, 68px);
    background: var(--papel);
}

/* no celular o ramo sai mais para fora para nao encostar no texto */
.espera-folha {
    right: -72px;
    top: 30%;
    width: 130px;
    height: 282px;
    rotate: -24deg;
}

.espera-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1040px;
    margin-inline: auto;
    text-align: center;
}

.espera-cabecalho {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 1.4vw, 14px);
}

/* legenda pequena entre dois fios, como a ponte dos ingressos */
.espera-pre {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    font-family: var(--fonte-texto);
    font-weight: 700;
    font-size: clamp(0.7rem, 2.4vw, 0.82rem);
    letter-spacing: 0.22em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--terracota);
}

.espera-pre::before,
.espera-pre::after {
    content: '';
    flex: 1;
    max-width: 96px;
    height: 1.5px;
    background: linear-gradient(to right, transparent, rgba(184, 104, 79, 0.5), transparent);
}

.espera-logo {
    width: min(78vw, 440px);
    height: auto;
}

.espera-ano {
    font-size: clamp(1.5rem, 5.6vw, 2.2rem);
    rotate: -4deg;
}

.espera-intro {
    max-width: 36ch;
    margin-top: clamp(20px, 3vw, 30px);
    font-size: clamp(1.02rem, 3.1vw, 1.3rem);
    line-height: 1.5;
    color: var(--texto);
    text-wrap: balance;
}

/* ---------- a lista ---------- */
.espera-lista {
    list-style: none;
    width: 100%;
    margin-top: clamp(34px, 5vw, 60px);
    border-top: 2px dotted rgba(184, 104, 79, 0.45);
    text-align: left;
}

.espera-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 4px clamp(14px, 3vw, 26px);
    padding: clamp(22px, 3.4vw, 34px) clamp(6px, 1.6vw, 18px);
    border-bottom: 2px dotted rgba(184, 104, 79, 0.45);
    transition: background-color 0.35s var(--ease-saida);
}

.espera-item:hover {
    background: rgba(245, 232, 226, 0.7);
}

.espera-num {
    grid-row: 1 / span 2;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-variation-settings: "SOFT" 100, "WONK" 1;
    font-size: clamp(0.85rem, 2.6vw, 1rem);
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--nude);
    transition: color 0.35s var(--ease-saida);
}

.espera-item:hover .espera-num {
    color: var(--terracota);
}

.espera-titulo {
    font-family: var(--fonte-faixa);
    font-weight: 400;
    /* calibrado para "momento de adoração" caber numa linha só */
    font-size: clamp(1.95rem, 7.4vw, 3.3rem);
    line-height: 0.92;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--tijolo);
}

.espera-titulo em {
    font-family: var(--fonte-titulo);
    font-style: italic;
    font-weight: 700;
    font-variation-settings: "SOFT" 100, "WONK" 1;
    font-size: 0.78em;
    letter-spacing: -0.02em;
    text-transform: lowercase;
    color: var(--terracota);
}

.espera-texto {
    max-width: 46ch;
    margin-top: clamp(6px, 1vw, 10px);
    font-size: clamp(0.95rem, 2.6vw, 1.06rem);
    line-height: 1.55;
    color: rgba(74, 33, 22, 0.82);
}

/* ---------- fecho ---------- */
.espera-mais {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: clamp(30px, 4.4vw, 46px);
}

.espera-mais-frase {
    font-family: var(--fonte-faixa);
    font-size: clamp(1.7rem, 6.4vw, 2.6rem);
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--tijolo);
}

.espera-mais-frase .script {
    font-size: 1.15em;
    text-transform: none;
}

.espera-mais-nota {
    max-width: 44ch;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    line-height: 1.5;
    color: rgba(74, 33, 22, 0.72);
    text-wrap: balance;
}

.espera .btn-cta {
    margin-top: clamp(32px, 4.6vw, 52px);
}

/* so a partir de 900px o texto sai para a coluna da direita: abaixo disso a
   coluna da descricao ficaria estreita demais e a lista perde o ritmo */
@media (min-width: 900px) {
    .espera-item {
        grid-template-columns: auto minmax(0, 1.12fr) minmax(0, 0.88fr);
        align-items: center;
        gap: 0 clamp(20px, 3.4vw, 44px);
    }

    .espera-num {
        grid-row: auto;
        align-self: center;
    }

    .espera-texto {
        margin-top: 0;
        padding-left: clamp(16px, 2.4vw, 30px);
        border-left: 2px dotted rgba(184, 104, 79, 0.35);
    }

    /* a partir daqui o titulo divide a linha com a descricao: a escala passa
       a acompanhar a largura da coluna, para "momento de adoracao" nao quebrar */
    .espera-titulo {
        font-size: clamp(1.9rem, 4.4vw, 3.3rem);
    }

    .espera-folha {
        right: -40px;
    }
}

/* =============================================
   LINE-UP
   ============================================= */
.lineup {
    --anterior: var(--papel);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 88px 0 72px;
    overflow: hidden;
    background: var(--terracota);
}

.lineup-folha {
    left: -30px;
    top: 60px;
    width: 100px;
    height: 216px;
    rotate: 30deg;
    fill: var(--nude);
    color: var(--nude);
    opacity: 0.8;
}

.lineup-titulo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: clamp(32px, 5vw, 64px);
    filter: drop-shadow(3px 5px 0 rgba(62, 26, 16, 0.2));
}

.lineup-kicker {
    font-size: clamp(1.8rem, 7vw, 3rem);
    color: var(--papel);
    rotate: -4deg;
    margin-bottom: 4px;
}

.lineup-titulo .faixa {
    font-size: clamp(3.4rem, 17vw, 8rem);
    rotate: -2deg;
}

.lineup-carrossel {
    position: relative;
    width: 100%;
    margin-bottom: 48px;
}

.lineup-trilho {
    list-style: none;
    display: flex;
    gap: 16px;
    padding: 16px var(--lateral) 20px;
    scroll-padding-inline: var(--lateral);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.lineup-trilho::-webkit-scrollbar {
    display: none;
}

.lineup-item {
    flex: 0 0 46%;
    scroll-snap-align: start;
}

/* cartão polaroid, levemente torto, alternando o lado */
.lineup-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 8px 8px 14px;
    border: 0;
    background: #FFFBF9;
    box-shadow: 0 14px 30px rgba(62, 26, 16, 0.25);
    cursor: pointer;
    text-align: left;
    rotate: -1.5deg;
    transition: rotate 0.4s var(--ease-saida), transform 0.4s var(--ease-saida);
}

.lineup-item:nth-child(even) .lineup-card {
    rotate: 1.5deg;
}

.lineup-card:hover,
.lineup-card:focus-visible {
    rotate: 0deg;
    transform: translateY(-6px);
}

.lineup-foto {
    width: 100%;
    aspect-ratio: 4 / 5;
}

.lineup-foto img {
    object-position: top center;
    filter: sepia(0.18) saturate(0.92);
    transition: transform 0.6s var(--ease-saida), filter 0.4s;
}

.lineup-card:hover .lineup-foto img,
.lineup-card:focus-visible .lineup-foto img {
    transform: scale(1.05);
    filter: none;
}

.lineup-nome {
    margin-top: 12px;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-variation-settings: "SOFT" 100, "WONK" 1;
    font-size: clamp(1rem, 3.8vw, 1.3rem);
    line-height: 1.1;
    color: var(--tijolo);
}

.lineup-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texto);
}

.lineup-tag::after {
    content: '+ bio';
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--tijolo);
    color: var(--rosado);
}

.lineup-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.lineup-btn {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: var(--tijolo);
    color: var(--rosado);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}

.lineup-btn:hover {
    background: var(--rosado);
    color: var(--tijolo);
}

.lineup-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* =============================================
   NÃO PODE FICAR DE FORA + INGRESSOS
   ============================================= */
.ingressos {
    /* cores das duas bordas quadriculadas: a de cima puxa o terracota do
       line-up, a de baixo puxa o nude da contagem */
    --dither-topo: var(--terracota);
    --dither-base: var(--nude);
    position: relative;
    padding: 104px var(--lateral) 108px;
    overflow: hidden;
    background: var(--tijolo);
    color: var(--rosado);
}

/* brilho quente atrás dos ingressos, para a área de compra "acender" */
.ingressos::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 46%;
    width: min(1100px, 130%);
    aspect-ratio: 1;
    translate: -50% 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(223, 185, 166, 0.16), transparent 62%);
    pointer-events: none;
}

.ingressos-folha-1 {
    right: -20px;
    top: 80px;
    width: 120px;
    height: 260px;
    rotate: -16deg;
    opacity: 0.5;
}

.ingressos-folha-2 {
    left: -40px;
    top: 520px;
    width: 110px;
    height: 238px;
    rotate: 20deg;
    opacity: 0.35;
}

.ingressos-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 1100px;
    margin-inline: auto;
}

/* ---------- ponte para os ingressos ---------- */
.cant-sub {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: clamp(24px, 3.6vw, 36px);
    font-weight: 500;
    font-size: clamp(1.05rem, 2.6vw, 1.35rem);
    line-height: 1.3;
    text-align: center;
}

/* fiozinhos dos dois lados da frase */
.cant-sub::before,
.cant-sub::after {
    content: '';
    flex: 1;
    max-width: 120px;
    height: 1.5px;
    background: linear-gradient(to right, transparent, rgba(223, 185, 166, 0.55), transparent);
}

.highlight-ingresso {
    font-size: 1.6em;
    color: var(--nude);
}

/* ---------- bordas quadriculadas da seção ---------- */
/* Mesmo canvas do rodapé. A de cima cai da cor da seção anterior para o
   tijolo; a de baixo é espelhada e sobe para a cor da seção seguinte. */
.ingressos .dither {
    --dither-altura: 88px;
}

/* escopado em .ingressos de propósito: a regra .dither do rodapé aparece
   depois no arquivo e, com a mesma especificidade, venceria o top/bottom */
.ingressos .dither--topo {
    top: 0;
    bottom: auto;
    --dither-cor: var(--dither-topo, var(--papel));
}

.ingressos .dither--base {
    top: auto;
    bottom: 0;
    transform: scaleY(-1);
    --dither-cor: var(--dither-base, var(--papel));
}

/* o conteúdo passa por cima das duas bordas */
.ingressos-inner {
    z-index: 2;
}

/* ---------- capacidade e andamento das vendas ---------- */
.vagas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    margin-bottom: clamp(30px, 4.2vw, 46px);
}

/* a escassez dita a seção: 700 em corpo grande, o resto discreto */
.vagas-limite {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 12px;
    font-family: var(--fonte-faixa);
    font-size: clamp(1rem, 3vw, 1.35rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--nude);
    text-align: center;
}

.vagas-limite-num {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-variation-settings: "SOFT" 100, "WONK" 1;
    font-size: clamp(3.4rem, 13vw, 5.6rem);
    line-height: 0.9;
    letter-spacing: -0.02em;
    color: var(--papel);
    text-shadow: 3px 4px 0 rgba(0, 0, 0, 0.18);
}

/* painel: só entra no ar quando existe número real de vendidos */
.vagas-painel {
    width: min(560px, 100%);
    padding: 24px 26px 22px;
    border: 1.5px solid rgba(223, 185, 166, 0.28);
    border-radius: 20px;
    background: rgba(62, 26, 16, 0.26);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    text-align: center;
}

.vagas-painel[hidden] { display: none; }

.vagas-rotulo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--nude);
}

.vagas-chama {
    width: 18px;
    height: 18px;
    fill: var(--terracota);
    transform-origin: 50% 90%;
}

.vagas-chama-nucleo { fill: var(--nude); }

.vagas-painel:not([hidden]) .vagas-chama {
    animation: chamaBate 2.6s ease-in-out infinite;
}

@keyframes chamaBate {
    50% { transform: scale(1.14); }
}

.vagas-numero {
    margin-top: 6px;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-variation-settings: "SOFT" 100, "WONK" 1;
    font-size: clamp(2.4rem, 9vw, 3.4rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--papel);
}

.vagas-de {
    font-size: 0.42em;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--nude);
}

.vagas-barra {
    margin-top: 16px;
}

.vagas-barra-trilho {
    display: block;
    height: 12px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(245, 232, 226, 0.16);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}

.vagas-barra-cheio {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--terracota), var(--nude) 70%, var(--papel));
    box-shadow: 0 0 10px rgba(223, 185, 166, 0.45);
    /* o JS escreve a largura real; a transição faz ela subir do zero */
    transition: width 1.1s var(--ease-saida);
}

.vagas-pct {
    margin-top: 12px;
    font-size: 0.86rem;
    color: var(--nude);
}

.vagas-pct strong {
    color: var(--papel);
}

/* ---------- lotes ----------
   Dois lotes, um ingresso em cada, nenhum combo: os dois cards são iguais em
   estrutura e só o preço, a janela de venda e a situação mudam. */
.setores {
    display: flex;
    flex-direction: column;
    gap: clamp(22px, 3.6vw, 32px);
    margin-bottom: clamp(32px, 4vw, 42px);
    scroll-margin-top: calc(var(--nav-altura) + 24px);
}

/* o nome .setor-cards continua: é por ele que o GSAP acha os cards */
.setor-cards {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(16px, 3vw, 22px);
}

.lote {
    display: flex;
}

/* ---------- o ingresso ---------- */
.ticket {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 18px 18px 18px;
    border-radius: 14px;
    background: linear-gradient(170deg, #EBC7B3, var(--nude));
    color: var(--texto);
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
    transition: transform 0.35s var(--ease-saida), box-shadow 0.35s var(--ease-saida);
}

.ticket:hover {
    transform: translateY(-8px) rotate(-1deg);
    box-shadow: 0 20px 38px rgba(0, 0, 0, 0.26);
}

/* o lote mais barato é o centro da decisão: fundo claro que salta no meio do
   nude e um anel de luz em volta */
.ticket--destaque {
    background: var(--papel);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.26), 0 0 0 2px rgba(245, 232, 226, 0.55);
}

.ticket--destaque:hover {
    box-shadow: 0 26px 48px rgba(0, 0, 0, 0.34), 0 0 0 2px rgba(245, 232, 226, 0.85);
}

/* ---------- cabeçalho do card: lote + situação ---------- */
.ticket-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding-bottom: 10px;
    border-bottom: 1.5px dashed rgba(133, 53, 30, 0.3);
}

.ticket-lote {
    font-family: var(--fonte-faixa);
    font-size: clamp(1.6rem, 5.6vw, 2.1rem);
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tijolo);
}

/* o selo só aparece quando o script.js sabe a situação real do lote */
.ticket-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px;
    border: 1.5px solid rgba(133, 53, 30, 0.3);
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tijolo);
    white-space: nowrap;
}

.ticket-status[hidden] { display: none; }

.ticket-status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* vendas abertas: o único selo com cor cheia, com o ponto pulsando */
.ticket-status--aberto {
    border-color: transparent;
    background: var(--terracota);
    color: var(--papel);
}

.ticket-status--aberto::before {
    animation: pontoPulsa 2.2s ease-in-out infinite;
}

@keyframes pontoPulsa {
    50% { transform: scale(1.5); opacity: 0.55; }
}

.ticket-status--espera {
    border-style: dashed;
    opacity: 0.8;
}

.ticket-status--fim {
    border-color: rgba(74, 33, 22, 0.25);
    color: rgba(74, 33, 22, 0.6);
}

.ticket-tipo {
    font-weight: 700;
    font-size: clamp(0.8rem, 2.6vw, 0.95rem);
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--terracota);
}

.ticket-preco {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-variation-settings: "SOFT" 100, "WONK" 1;
    font-size: clamp(2.4rem, 9vw, 3.4rem);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--tijolo);
}

.ticket-preco small {
    font-size: 0.42em;
    letter-spacing: 0;
}

/* data do evento no ingresso, logo abaixo do tipo */
.ticket-data {
    margin-top: -4px;
    font-weight: 700;
    font-size: clamp(0.64rem, 2vw, 0.72rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texto);
    opacity: 0.66;
}

/* janela de venda: o dado que diferencia um lote do outro */
.ticket-janela {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 2px;
    padding: 7px 11px;
    border-radius: 9px;
    background: rgba(133, 53, 30, 0.08);
}

.ticket-janela-rotulo {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.6;
}

.ticket-janela-datas {
    font-family: var(--fonte-faixa);
    font-size: clamp(1.05rem, 3.4vw, 1.25rem);
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--tijolo);
}

/* ---------- personalização do ingresso ---------- */
/* marca do evento no topo, como num ingresso de verdade */
.ticket-marca {
    width: 100%;
    max-width: 132px;
    height: auto;
    margin-top: 4px;
    margin-bottom: 2px;
    /* sobre o nude o logo escuro já tem contraste; só tira um pouco do peso */
    opacity: 0.92;
}

.ticket--destaque .ticket-marca {
    opacity: 1;
}

/* recortes laterais do ticket: dois círculos na cor do fundo da seção */
.ticket-base {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 2px dashed rgba(133, 53, 30, 0.3);
}

/* o círculo fica centrado na BORDA do card: como .ticket-base está 18px
   para dentro (padding do .ticket), o recuo é 18px + metade do círculo */
.ticket-base::before,
.ticket-base::after {
    content: '';
    position: absolute;
    top: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--tijolo);
}

.ticket-base::before { left: -26px; }
.ticket-base::after  { right: -26px; }

.ticket-detalhe {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
}

.ticket-acao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tijolo);
}

.ticket-acao::after {
    content: '→';
    transition: transform 0.3s var(--ease-saida);
}

.ticket:hover .ticket-acao::after {
    transform: translateX(4px);
}

/* crédito da igreja no canhoto, discreto */
.ticket-realizacao {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px dotted rgba(133, 53, 30, 0.28);
}

.ticket-realizacao-rotulo {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.55;
}

.ticket-realizacao img {
    width: 100%;
    max-width: 120px;
    height: auto;
    opacity: 0.68;
}

/* ---------- situação escrita pelo script.js ---------- */
/* lote em venda: ganha o anel de luz mesmo sem ser o do destaque */
.lote.is-aberto .ticket {
    background: var(--papel);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28), 0 0 0 2px rgba(245, 232, 226, 0.7);
}

.lote.is-aberto .ticket:hover {
    box-shadow: 0 26px 48px rgba(0, 0, 0, 0.34), 0 0 0 2px rgba(245, 232, 226, 0.9);
}

/* lote encerrado: some do caminho sem sumir da página */
.lote.is-encerrado .ticket {
    background: linear-gradient(170deg, #D9BCAE, #C9A695);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
    opacity: 0.62;
    pointer-events: none;
}

.lote.is-encerrado .ticket-acao::after {
    content: none;
}

/* ---------- entrada ao rolar (termina no estado natural) ---------- */
.setor-cards li:nth-child(1) { --t: 0; }
.setor-cards li:nth-child(2) { --t: 1; }
.setor-cards li:nth-child(3) { --t: 2; }
.setor-cards li:nth-child(4) { --t: 3; }

.setores.is-dentro .ticket {
    animation: sobeSuave 0.6s var(--ease-saida) backwards;
    animation-delay: calc(0.08s + var(--t, 0) * 0.1s);
}

@keyframes sobeSuave {
    from { opacity: 0; transform: translateY(26px); }
}

.ingressos-inner > .btn-cta {
    align-self: center;
    padding-inline: clamp(34px, 6vw, 58px);
    font-size: clamp(0.95rem, 2.4vw, 1.08rem);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s var(--ease-saida), box-shadow 0.3s var(--ease-saida);
}

.ingressos-inner > .btn-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.38);
}

/* =============================================
   CONTAGEM REGRESSIVA
   Entrou no lugar do antigo UPGRADE e herdou o nude dele: e a ultima secao
   antes do rodape, entao a borda quadriculada dele sai desta cor.
   ============================================= */
.regressiva {
    --anterior: var(--tijolo);
    padding: 64px var(--lateral);
    background: var(--nude);
}

.regressiva-inner {
    max-width: 1080px;
    margin-inline: auto;
}

/* calendario de um lado, relogio do outro */
.regressiva-palco {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(30px, 5vw, 48px);
}

.regressiva-lado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 3.5vw, 30px);
    min-width: 0;
}

.regressiva-titulo {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: clamp(2.4rem, 11vw, 4.4rem);
    filter: drop-shadow(3px 5px 0 rgba(62, 26, 16, 0.16));
}

.regressiva-kicker {
    /* a letra de mao tem descida longa: sem essa folga ela encosta na faixa */
    margin-bottom: 0.62em;
    font-size: clamp(1.3rem, 5vw, 2rem);
    color: var(--tijolo);
    rotate: -3deg;
}

.regressiva-titulo .faixa {
    rotate: -2deg;
}

/* calendario pregado na parede: papel torto, sombra funda e percevejo */
.calendario {
    position: relative;
    width: min(100%, 420px);
    padding: 30px clamp(16px, 3.4vw, 24px) 20px;
    background: var(--papel);
    rotate: -1.6deg;
    box-shadow: 0 26px 46px rgba(62, 26, 16, 0.22);
}

.cal-percevejo {
    position: absolute;
    top: -11px;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, var(--terracota) 0%, var(--tijolo) 62%);
    box-shadow: 0 7px 12px rgba(62, 26, 16, 0.38);
}

.cal-percevejo::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(251, 245, 242, 0.55);
}

.cal-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1.5px dashed rgba(133, 53, 30, 0.34);
}

.cal-mes {
    font-family: var(--fonte-faixa);
    font-size: clamp(1.8rem, 5.6vw, 2.5rem);
    line-height: 1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--tijolo);
}

.cal-ano {
    font-family: var(--fonte-faixa);
    font-size: clamp(1.1rem, 3.4vw, 1.5rem);
    line-height: 1;
    letter-spacing: 0.1em;
    color: var(--terracota);
}

.cal-grade {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.cal-semana {
    padding-bottom: 6px;
    font-weight: 700;
    font-size: clamp(0.56rem, 1.9vw, 0.68rem);
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    color: var(--tijolo);
    opacity: 0.5;
}

.cal-dia {
    display: grid;
    place-content: center;
    aspect-ratio: 1;
    border-radius: 50%;
    font-weight: 600;
    font-size: clamp(0.78rem, 2.6vw, 1rem);
    color: var(--texto);
}

.cal-dia--vazio {
    visibility: hidden;
}

/* os dias do evento: disco tijolo, o mesmo destaque da marca */
.cal-dia.is-evento {
    background: var(--tijolo);
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-variation-settings: "SOFT" 100, "WONK" 1;
    font-size: clamp(0.95rem, 3vw, 1.2rem);
    color: var(--papel);
    box-shadow: 0 6px 14px rgba(62, 26, 16, 0.28);
}

.cal-nota {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1.5px dashed rgba(133, 53, 30, 0.34);
}

.cal-nota .script {
    font-size: clamp(1.05rem, 3.4vw, 1.3rem);
    color: var(--tijolo);
    rotate: -3deg;
}

.cal-local {
    font-weight: 700;
    font-size: clamp(0.56rem, 1.9vw, 0.68rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--texto);
    opacity: 0.66;
}

/* relogio: um circulo por unidade */
.regressiva-relogio {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, auto));
    justify-content: center;
    gap: clamp(12px, 2.6vw, 22px);
    list-style: none;
}

.regressiva-bolha {
    position: relative;
    display: grid;
    place-content: center;
    width: clamp(104px, 26vw, 168px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--papel);
    box-shadow: 0 14px 28px rgba(62, 26, 16, 0.14);
}

/* o circulo dos dias e o destaque: mesma roda, na cor cheia da marca */
.regressiva-bolha--dias {
    background: var(--tijolo);
    color: var(--papel);
}

.regressiva-arco {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* o arco comeca as 12h e anda no sentido do relogio */
    rotate: -90deg;
    overflow: visible;
}

.regressiva-arco circle {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
}

.arco-trilho {
    stroke: rgba(133, 53, 30, 0.16);
}

.arco-ativo {
    stroke: var(--terracota);
    /* 2 * pi * 54; o script so mexe no dashoffset */
    stroke-dasharray: 339.29;
    stroke-dashoffset: 339.29;
    transition: stroke-dashoffset 0.45s ease;
}

.regressiva-bolha--dias .arco-trilho {
    stroke: rgba(251, 245, 242, 0.22);
}

.regressiva-bolha--dias .arco-ativo {
    stroke: var(--nude);
}

.regressiva-num {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-variation-settings: "SOFT" 100, "WONK" 1;
    font-size: clamp(2rem, 7.4vw, 3.1rem);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--tijolo);
}

.regressiva-bolha--dias .regressiva-num {
    color: var(--papel);
}

.regressiva-rotulo {
    margin-top: 6px;
    font-weight: 700;
    font-size: clamp(0.56rem, 1.9vw, 0.7rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tijolo);
    opacity: 0.68;
}

.regressiva-bolha--dias .regressiva-rotulo {
    color: var(--papel);
    opacity: 0.8;
}

/* pulso de um segundo no ultimo circulo. E enfeite de CSS: se nao rodar,
   o numero continua la, so nao pulsa. */
.regressiva-bolha--segundos {
    animation: pulsarSegundo 1s ease-in-out infinite;
}

@keyframes pulsarSegundo {
    0%, 100% { transform: scale(1); }
    12% { transform: scale(1.045); }
}

@media (prefers-reduced-motion: reduce) {
    .regressiva-bolha--segundos {
        animation: none;
    }
}

/* no dia do evento o relogio some e sobra o recado */
.regressiva-relogio[hidden],
.regressiva-hoje[hidden] {
    display: none;
}

.regressiva-hoje {
    font-family: var(--fonte-mao);
    font-size: clamp(1.6rem, 6vw, 2.6rem);
    line-height: 1.1;
    color: var(--tijolo);
    rotate: -2deg;
}

/* =============================================
   RODAPÉ
   ============================================= */
.rodape {
    /* a borda quadriculada e desenhada na cor da secao anterior: a regressiva */
    --dither-cor: var(--nude);
    --dither-altura: 96px;
    position: relative;
    padding: calc(var(--dither-altura) + 56px) var(--lateral) 32px;
    overflow: hidden;
    background: var(--tijolo);
    color: var(--rosado);
}

/* borda pontilhada em pixels. Sem o script, um degradê faz a transição. */
.dither {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: var(--dither-altura);
    pointer-events: none;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    background: linear-gradient(var(--dither-cor), transparent);
}

.dither.is-ready {
    background: none;
}

.rodape-folha-1,
.rodape-folha-2 {
    width: 120px;
    height: 260px;
    color: var(--terracota);
    opacity: 0.6;
}

.rodape-folha-1 {
    left: -30px;
    top: 180px;
    rotate: 20deg;
}

.rodape-folha-2 {
    right: -30px;
    bottom: 120px;
    rotate: -160deg;
}

.rodape-logo {
    position: relative;
    width: min(86vw, 620px);
    height: auto;
    margin: 0 auto 56px;
}

.rodape-grid {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 40px;
    max-width: 1200px;
    margin-inline: auto;
    text-align: center;
}

.rodape-frase {
    max-width: 420px;
    font-size: 1.05rem;
    line-height: 1.5;
}

.rodape .highlight {
    color: var(--nude);
}

.rodape-nav {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 10px 48px;
}

.rodape-link {
    font-family: var(--fonte-titulo);
    font-style: italic;
    font-weight: 700;
    font-variation-settings: "SOFT" 100, "WONK" 1;
    font-size: 1.4rem;
    color: var(--nude);
    text-decoration: none;
    transition: color 0.2s;
}

.rodape-link:hover {
    color: var(--rosado);
}

.rodape-social {
    display: flex;
    gap: 22px;
}

.rodape-social a {
    color: var(--nude);
    transition: color 0.2s, transform 0.2s;
}

.rodape-social a:hover {
    color: var(--rosado);
    transform: translateY(-2px);
}

.rodape-social svg {
    width: 28px;
    height: 28px;
}

.rodape-realizacao {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 1200px;
    margin: 64px auto 0;
    padding-top: 48px;
    border-top: 1px solid rgba(245, 232, 226, 0.18);
}

.rodape-realizacao-rotulo {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.7;
}

.rodape-realizacao img {
    width: min(240px, 66vw);
    height: auto;
}

.rodape-copy {
    position: relative;
    display: block;
    margin-top: 40px;
    font-size: 0.8rem;
    text-align: center;
    opacity: 0.65;
}

/* =============================================
   MODAIS
   ============================================= */
.modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: 64px 16px 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0s linear 0.3s;
}

.modal.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s, visibility 0s;
}

.modal-fundo {
    position: absolute;
    inset: 0;
    background: rgba(62, 26, 16, 0.72);
}

@media (min-width: 1024px) {
    .modal-fundo {
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }
}

.modal-fechar {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    font-size: 1.3rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.modal-fechar:hover {
    opacity: 0.6;
}

.bio-card {
    position: relative;
    width: min(520px, 100%);
    max-height: calc(100svh - 88px);
    overflow-y: auto;
    padding: 52px 32px 40px;
    border-radius: 6px;
    background: var(--papel);
    color: var(--texto);
    box-shadow: 8px 10px 0 var(--nude);
    transform: translateY(24px) rotate(-1deg) scale(0.96);
    transition: transform 0.45s var(--ease-saida);
}

.modal.is-open .bio-card {
    transform: rotate(-0.5deg);
}

.bio-nome {
    margin-bottom: 18px;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-variation-settings: "SOFT" 100, "WONK" 1;
    font-size: clamp(1.7rem, 6vw, 2.4rem);
    line-height: 1.05;
    color: var(--tijolo);
}

.bio-nome::after {
    content: '';
    display: block;
    width: 64px;
    height: 4px;
    margin-top: 14px;
    border-radius: 4px;
    background: var(--nude);
}

.bio-texto p {
    line-height: 1.65;
}

.bio-texto p + p {
    margin-top: 12px;
}

.video-modal-conteudo {
    position: relative;
    width: min(1000px, 100%);
}

.modal-fechar--claro {
    top: -52px;
    right: 0;
    color: var(--rosado);
}

.video-modal-frame {
    aspect-ratio: 16 / 9;
    background: #000;
}

.video-modal-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-modal-vazio {
    display: grid;
    place-items: center;
    height: 100%;
    padding: 24px;
    color: var(--rosado);
    text-align: center;
    font-size: 0.95rem;
}

/* =============================================
   TABLET (768px+)
   ============================================= */
@media (min-width: 768px) {
    .lineup-item {
        flex-basis: 30%;
    }

    .setor-cards {
        /* dois lotes lado a lado: a comparação de preço fica num olhar só */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(20px, 3vw, 28px);
        align-items: stretch;
        width: 100%;
        max-width: 860px;
        margin: 0 auto;
    }

    .ticket {
        padding: 22px 22px 20px;
    }

    /* o lote em venda sobe um degrau e fica maior que o vizinho */
    .lote.is-aberto .ticket,
    .lote:only-child .ticket {
        transform: scale(1.04);
    }

    .lote.is-aberto .ticket:hover,
    .lote:only-child .ticket:hover {
        transform: scale(1.04) translateY(-8px) rotate(-1deg);
    }

    .rodape {
        --dither-altura: 128px;
    }

    .rodape-grid {
        grid-template-columns: 1.4fr 1fr auto;
        align-items: center;
        justify-items: start;
        text-align: left;
    }
}

/* =============================================
   DESKTOP (1024px+)
   ============================================= */
@media (min-width: 1024px) {
    :root {
        --nav-altura: 84px;
    }

    .nav-logo img {
        height: 38px;
    }

    .nav-links {
        display: flex;
        gap: 36px;
    }

    .nav-link {
        position: relative;
        font-weight: 700;
        font-size: 0.85rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--tijolo);
    }

    .nav-link::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -6px;
        height: 3px;
        border-radius: 3px;
        background: var(--nude);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s var(--ease-saida);
    }

    .nav-link:hover::after {
        transform: scaleX(1);
    }

    .nav-menu-btn,
    .menu-overlay {
        display: none;
    }

    /* hero: texto e logo à esquerda, coração à direita */
    .hero {
        padding-bottom: 96px;
    }

    .hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        align-items: center;
        gap: 56px;
    }

    .hero-texto {
        order: -1;
        align-items: flex-start;
        text-align: left;
    }

    .hero-coracao {
        width: min(72%, 396px);
        justify-self: center;
        margin: 0;
    }

    .hero-titulo {
        width: min(100%, 600px);
    }

    .hero-topo {
        justify-content: flex-start;
    }

    .hero-info {
        justify-content: flex-start;
    }

    .hero-folha-1 {
        right: 3%;
        top: 12%;
        width: 120px;
        height: 260px;
    }

    .hero-folha-2 {
        left: 30%;
        bottom: -40px;
        width: 130px;
        height: 282px;
        rotate: 40deg;
    }

    .hero-rolar {
        position: absolute;
        left: 50%;
        bottom: 22px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--tijolo);
        transform: translateX(-50%);
    }

    .hero-rolar::after {
        content: '';
        width: 1.5px;
        height: 40px;
        background: linear-gradient(var(--tijolo), transparent);
        transform-origin: top;
        animation: rolarLinha 1.8s ease-in-out infinite;
    }

    /* galeria à esquerda (sticky), texto rolando à direita */
    .sobre {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }

    /* No desktop a coluna deixa de ter altura fixa e passa a acompanhar a
       linha do grid. Sem um minimo, a pista de rolagem virava o tamanho do
       texto ao lado (~0,7 tela) e as 8 fotos entravam quase juntas. O
       min-height devolve o trilho longo que o mobile ja tinha. */
    .galeria-col {
        height: auto;
        min-height: 220vh;
    }

    .galeria-titulo .script {
        font-size: clamp(3rem, 4.4vw, 4.6rem);
    }

    .galeria-titulo .titulo {
        font-size: clamp(4rem, 7.4vw, 8rem);
    }

    .galeria-card:nth-child(1) { width: 28%; left: 3%;  top: 6%; }
    .galeria-card:nth-child(2) { width: 32%; left: 36%; top: 3%; }
    .galeria-card:nth-child(3) { width: 26%; left: 72%; top: 10%; }
    .galeria-card:nth-child(4) { width: 30%; left: 8%;  top: 38%; }
    .galeria-card:nth-child(5) { width: 26%; left: 44%; top: 36%; }
    .galeria-card:nth-child(6) { width: 24%; left: 74%; top: 44%; }
    .galeria-card:nth-child(7) { width: 26%; left: 2%;  top: 69%; }
    .galeria-card:nth-child(8) { width: 30%; left: 40%; top: 65%; }

    /* no desktop o texto e alinhado a esquerda: a abertura acompanha */
    .about-abre {
        align-items: flex-start;
    }

    .about {
        align-items: flex-start;
        justify-content: center;
        /* respiro entre os paragrafos: espalha o texto pelo trilho para cada
           um entrar na tela no seu tempo, sem revelarem todos de uma vez */
        gap: clamp(40px, 10vh, 120px);
        max-width: 600px;
        margin: 0;
        padding: 30vh var(--lateral) 30vh 48px;
        text-align: left;
    }

    .lineup-carrossel {
        max-width: 1240px;
        padding-inline: var(--lateral);
    }

    .lineup-trilho {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 44px 28px;
        padding: 16px 0;
        overflow: visible;
    }

    .lineup-nav {
        display: none;
    }

    .ticket-topo {
        padding-bottom: 12px;
    }

    .regressiva {
        padding: 72px var(--lateral);
    }

    /* calendario a esquerda, relogio a direita */
    .regressiva-palco {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: clamp(40px, 6vw, 76px);
    }

    .calendario {
        flex: 0 1 470px;
        width: min(100%, 470px);
    }

    .regressiva-lado {
        flex: 0 1 400px;
        align-items: flex-start;
    }

    .regressiva-titulo {
        align-items: flex-start;
        font-size: clamp(3.4rem, 6vw, 5rem);
    }

    .regressiva-relogio {
        justify-content: start;
    }

    .rodape {
        --dither-altura: 152px;
    }
}

@keyframes rolarLinha {
    0%   { transform: scaleY(0); opacity: 1; }
    50%  { transform: scaleY(1); opacity: 1; }
    100% { transform: scaleY(1); opacity: 0; }
}

/* =============================================
   MOVIMENTO REDUZIDO
   ============================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Enfeites lentos e contínuos continuam mesmo com "menos movimento" no
       sistema, para a página não ficar totalmente parada no computador.
       São só animações de CSS: nenhuma delas esconde conteúdo, então não há
       risco de um elemento ficar invisível se algo não rodar. */
    .hero-anel {
        animation-duration: 48s !important;
        animation-iteration-count: infinite !important;
    }

    .faixa-rolante-trilho {
        animation-duration: 34s !important;
        animation-iteration-count: infinite !important;
    }

    /* fotos da galeria: entrada + flutuação.
       Precisa devolver também os atrasos, senão as 8 entram de uma vez. */
    .galeria-stage.is-dentro .galeria-card {
        animation-duration: 0.9s, var(--flut, 8s) !important;
        animation-iteration-count: 1, infinite !important;
        animation-delay:
            calc(var(--i, 0) * 0.09s),
            calc(0.9s + var(--i, 0) * 0.09s) !important;
    }

    .galeria-sticky:has(.is-dentro) .galeria-titulo {
        animation-duration: 11s !important;
        animation-iteration-count: infinite !important;
    }

    /* a barra de vagas cresce do zero: é o movimento que mostra o andamento */
    .vagas-barra-cheio {
        transition-duration: 1.1s !important;
    }

    .vagas-painel:not([hidden]) .vagas-chama {
        animation-duration: 2.6s !important;
        animation-iteration-count: infinite !important;
    }

    /* o ponto do selo "vendas abertas" continua batendo: nao esconde nada */
    .ticket-status--aberto::before {
        animation-duration: 2.2s !important;
        animation-iteration-count: infinite !important;
    }

    /* ingressos: entrada ao rolar */
    .setores.is-dentro .ticket {
        animation-duration: 0.6s !important;
        animation-delay: calc(0.08s + var(--t, 0) * 0.1s) !important;
    }

    /* linha do "rolar" no hero (só existe a partir de 1024px) */
    .hero-rolar::after {
        animation-duration: 1.8s !important;
        animation-iteration-count: infinite !important;
    }

    /* revelação dos links do menu do celular */
    .menu-overlay.is-open .menu-overlay-link span {
        animation-duration: 0.55s !important;
    }

    .menu-overlay.is-open .menu-overlay-link::after {
        animation-duration: 0.75s !important;
    }

    .menu-overlay.is-open .menu-overlay-link:nth-child(1) span,
    .menu-overlay.is-open .menu-overlay-link:nth-child(1)::after { animation-delay: 0.3s !important; }
    .menu-overlay.is-open .menu-overlay-link:nth-child(2) span,
    .menu-overlay.is-open .menu-overlay-link:nth-child(2)::after { animation-delay: 0.42s !important; }
    .menu-overlay.is-open .menu-overlay-link:nth-child(3) span,
    .menu-overlay.is-open .menu-overlay-link:nth-child(3)::after { animation-delay: 0.54s !important; }
}