/* =============================================
   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);
}

/* CONVIDAR UMA AMIGA: contorno com o coracao da marca num selo redondo.
   Texto e link no convite.js. --claro e para fundo tijolo. */
.btn-convite {
    --convite-cor: var(--tijolo);
    --convite-selo: var(--rosado);
    --convite-texto-hover: var(--rosado);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    max-width: 100%;
    min-height: 54px;
    padding: 5px 28px 5px 5px;
    border: 2px solid var(--convite-cor);
    border-radius: 999px;
    color: var(--convite-cor);
    font-weight: 700;
    font-size: clamp(0.85rem, 3.4vw, 1rem);
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.25s, color 0.25s, transform 0.25s var(--ease-saida);
}

.btn-convite--claro {
    --convite-cor: var(--rosado);
    --convite-selo: var(--papel);
    --convite-texto-hover: var(--tijolo);
}

.btn-convite:hover {
    background: var(--convite-cor);
    color: var(--convite-texto-hover);
    transform: translateY(-2px);
}

.btn-convite:active {
    transform: translateY(1px);
}

.btn-convite-coracao {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--convite-selo);
    box-shadow: 2px 3px 0 var(--terracota);
}

.btn-convite-coracao img {
    width: 25px;
    height: auto;
    animation: conviteBate 2.4s ease-in-out infinite;
}

/* batida leve do coracao: dois pulsos e uma pausa */
@keyframes conviteBate {
    0%, 30%, 100% { transform: scale(1); }
    10% { transform: scale(1.16); }
    20% { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .btn-convite-coracao img {
        animation: none;
    }
}

/* =============================================
   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: 1000px;
    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);
}

/* A capa e paisagem no computador e 4:5 no celular (o <picture> troca o
   arquivo); o play vai na emenda entre as duas fotos, fora dos rostos. */
.recap-foto {
    display: block;
    aspect-ratio: 16 / 9;
    --play-x: 66.5%;
    --play-y: 50%;
}

.recap-foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* a previa cobre so a area das fotos (medidas da arte de 1920x1080 e
   1080x1350); aparece por cima da capa quando comeca a tocar */
.recap-foto .recap-previa {
    position: absolute;
    top: 0;
    left: 32.292%;
    width: 67.708%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s;
}

.recap-foto .recap-previa.is-tocando {
    opacity: 1;
}

@media (max-width: 640px) {
    .recap-foto {
        aspect-ratio: 4 / 5;
        --play-x: 50%;
        --play-y: 71.3%;
    }

    .recap-foto .recap-previa {
        top: 41.481%;
        left: 0;
        width: 100%;
        height: 58.519%;
    }
}

.recap-play {
    position: absolute;
    left: var(--play-x);
    top: var(--play-y);
    translate: -50% -50%;
    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-convite {
    display: flex;
    justify-content: center;
    margin-top: clamp(40px, 5vw, 60px);
}

.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;
    /* topo curto: a mancha do alto é do mesmo branco da seção de cima e as
       duas se emendam, então um respiro grande aqui virava um vão vazio */
    padding: clamp(28px, 4vw, 44px) 0 72px;
    overflow: hidden;
    /* manchas brancas em blocos (como pixel de tela "corroído"), soltas pelo
       alto e pelas laterais, POR CIMA da grade: o branco fica igual ao
       --papel da seção anterior e a grade de pontos só aparece no terracota.
       O centro, onde ficam os cards, fica mais livre. */
    background:
        url('assets/imagens/lineup/fundo-manchas.svg') center top / cover no-repeat,
        radial-gradient(circle, rgba(62, 26, 16, 0.22) 1.5px, transparent 2px) -1px -1px / 64px 64px,
        linear-gradient(rgba(62, 26, 16, 0.07) 1px, transparent 1px) 0 0 / 64px 64px,
        linear-gradient(90deg, rgba(62, 26, 16, 0.07) 1px, transparent 1px) 0 0 / 64px 64px,
        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(4px, 1vw, 12px);
    filter: drop-shadow(3px 5px 0 rgba(62, 26, 16, 0.2));
}

.lineup-kicker {
    font-size: clamp(1.8rem, 7vw, 3rem);
    color: var(--tijolo);   /* sobre a mancha rosada que o fundo sempre põe atrás do título */
    rotate: -4deg;
    margin-bottom: 4px;
}

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

.lineup-carrossel {
    position: relative;
    width: 100%;
}

/* Dois nomes, lado a lado em qualquer largura. O card é um "palco" escuro
   com cantos em degrau; a pessoa sai pelo topo e se dissolve em pixels na
   base (o efeito já vem gravado na imagem), e o nome gigante entra por cima.
   Tudo dentro do card é medido em cqi (% da largura do card), então o
   desenho é o mesmo no celular e no notebook, só muda o tamanho. */
.lineup-trilho {
    list-style: none;
    display: grid;
    /* o card é quase quadrado (0,88) e nunca passa da altura da tela, com a
       cabeça que sai do topo: no notebook os dois cabem inteiros */
    --card-max: min(600px, calc((100svh - 200px) * 0.88));
    grid-template-columns: repeat(2, minmax(0, var(--card-max)));
    justify-content: center;
    gap: clamp(14px, 2.4vw, 40px);
    max-width: 1300px;
    margin-inline: auto;
    /* folga no topo só para a cabeça que sai do card */
    padding: clamp(40px, 12vw, 84px) var(--lateral) 20px;
}

.lineup-card {
    /* o recorte do card: degraus pequenos no alto à esquerda, embaixo à
       esquerda e na lateral direita (usado no palco e no véu do nome) */
    --recorte: polygon(
        0 6cqi, 4cqi 6cqi, 4cqi 0,
        100% 0, 100% 70%,
        97cqi 70%, 97cqi 86%, 100% 86%,
        100% 100%, 7cqi 100%, 7cqi calc(100% - 4cqi), 0 calc(100% - 4cqi)
    );
    --escuro: #3E1A10;
    --card: var(--papel);   /* o mesmo branco das manchas e da seção de cima */
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 22 / 25;   /* largo: o branco abre para os lados e a pessoa fica no meio */
    /* unidade do conteúdo: a largura que o card tinha quando era 2:3. Nome,
       etiqueta, logo e foto são medidos nela, então abrir o card para os
       lados não os faz crescer */
    --u: 0.758cqi;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
    container-type: inline-size;
    transition: transform 0.4s var(--ease-saida);
}

/* mancha branca em blocos saindo da lateral direita do card da Salmista
   Diorgenis, na parte de baixo: presa ao card (e não ao fundo), cai no
   mesmo lugar em qualquer tela. Fica atrás do card, do mesmo branco. */
.lineup-item {
    position: relative;
    isolation: isolate;
}

.lineup-item:nth-child(2)::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 94%;   /* por baixo do degrau da lateral do card: os dois se emendam */
    top: 64%;
    width: 72%;
    aspect-ratio: 2 / 1;
    background: url('assets/imagens/lineup/mancha-diorgenis.svg') left top / 100% 100% no-repeat;
    pointer-events: none;
}

/* no celular a largura é o limite (não a altura): o card volta a ser alto
   (2:3) e a pessoa ocupa a largura dele, em vez de ficar pequena no meio */
@media (max-width: 767.98px) {
    .lineup-card {
        aspect-ratio: 2 / 3;
        --u: 1cqi;
    }

    .lineup-item:nth-child(2)::after {
        display: none;
    }

    /* um card por vez, grande: os dois ficam um embaixo do outro e cada um
       ocupa a largura da tela (sem passar da altura dela) */
    .lineup-trilho {
        --card-max: min(420px, 84vw, calc((100svh - 130px) * 2 / 3));
        grid-template-columns: minmax(0, var(--card-max));
        row-gap: 48px;
    }
}

/* ...e, com movimento liberado, o da Débora para no alto da tela e o do
   Diorgenis sobe por cima dele (o script apaga o de baixo enquanto isso).
   O line-up usa overflow: clip, e não hidden, senão o sticky não prende. */
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
    .lineup {
        overflow: clip;
    }

    .lineup-trilho {
        row-gap: 22svh;
    }

    /* folga depois do último card: sem ela o do Diorgenis não chega a
       parar, porque o sticky solta quando o trilho acaba */
    .lineup-trilho::after {
        content: '';
        height: 12svh;
    }

    .lineup-item {
        position: sticky;
        /* a cabeça sai uns 14% da largura acima do card: a folga é para ela */
        top: calc(14px + var(--card-max) * 0.16);
    }

    /* o script mexe no transform do card a cada quadro da rolagem: sem a
       transição do hover (que atrasava cada passo e fazia o card tremer) e
       numa camada própria, o celular só recompõe, sem repintar a foto */
    .lineup-trilho .lineup-card,
    .lineup-trilho .lineup-card:hover,
    .lineup-trilho .lineup-card:focus-visible {
        transition: none;
        transform: none;
        will-change: transform, opacity;
    }

    .lineup-trilho .lineup-card:hover .lineup-foto img,
    .lineup-trilho .lineup-card:focus-visible .lineup-foto img {
        transform: none;
    }
}

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

.lineup-card:focus-visible {
    outline: 3px solid var(--rosado);
    outline-offset: 6px;
}

/* o palco: o mesmo branco-papel do resto da página, só com o símbolo da
   marca bem apagado ao fundo e cantos com um degrau discreto */
.lineup-palco {
    position: absolute;
    inset: 0;
    background:
        url('assets/imagens/marca/simbolo-marca-dagua.webp') 50% 22% / 65% auto no-repeat,
        var(--card);
    clip-path: var(--recorte);
}

/* a foto ocupa a largura do card e é ancorada acima da faixa do nome: a
   cabeça (e a mão) passa do topo e a base dissolvida fica atrás do nome */
.lineup-foto {
    position: absolute;
    left: 50%;
    width: calc(96 * var(--u));
    translate: -50% 0;
    bottom: 30%;
    aspect-ratio: var(--proporcao, 4 / 5);
    overflow: visible;
    background: none;
    z-index: 1;
}

.lineup-foto picture {
    position: absolute;
    inset: 0;
}

.lineup-foto.is-missing picture {
    display: none;
}

.lineup-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    transform-origin: bottom center;
    filter: drop-shadow(0 6px 14px rgba(62, 26, 16, 0.22));
    transition: transform 0.6s var(--ease-saida);
}

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

.lineup-nome {
    position: absolute;
    left: calc(10 * var(--u));
    right: calc(10 * var(--u));
    bottom: calc(15.5 * var(--u));
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--fonte-faixa);
    font-weight: 400;
    line-height: 0.84;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

/* véu branco atrás do nome, para ele não brigar com a roupa dissolvida.
   Ocupa o card inteiro com o mesmo recorte do palco. */
.lineup-veu {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to top, var(--card) 0 33%, rgba(251, 245, 242, 0.8) 37%, rgba(251, 245, 242, 0) 42%);
    clip-path: var(--recorte);
}

.lineup-nome-1,
.lineup-nome-2 {
    font-size: clamp(26px, 7vw, 88px);   /* sem suporte a cqi */
    font-size: calc(21 * var(--u));
}

.lineup-nome-1 {
    color: var(--texto);
}

.lineup-nome-2 {
    color: var(--tijolo);
}

/* etiqueta colada por cima do nome, torta como as faixas do site */
.lineup-tag {
    position: relative;
    z-index: 1;
    margin: calc(-1.5 * var(--u)) 0 calc(-0.5 * var(--u));
    padding: calc(1.6 * var(--u)) calc(4.5 * var(--u)) calc(1.3 * var(--u));
    background: var(--tijolo);
    color: var(--rosado);
    font: 700 max(9px, calc(3.7 * var(--u)))/1 var(--fonte-texto);
    letter-spacing: 0.14em;
    rotate: -4deg;
    box-shadow: calc(0.8 * var(--u)) calc(0.8 * var(--u)) 0 var(--nude);
}

.lineup-item:nth-child(even) .lineup-tag {
    rotate: 3deg;
}

/* assinatura da marca no rodapé de cada card */
.lineup-logo {
    position: absolute;
    left: 50%;
    bottom: calc(9.5 * var(--u));
    z-index: 2;
    width: calc(34 * var(--u));
    height: auto;
    translate: -50% 0;
}

/* "+ bio" discreto, embaixo à direita, na linha do logo: só texto, com um
   sublinhado pontilhado; ganha força quando o card é tocado/apontado */
.lineup-bio {
    position: absolute;
    right: calc(9 * var(--u));
    bottom: calc(10 * var(--u));
    z-index: 3;
    padding: calc(0.6 * var(--u)) 0;
    border-bottom: 1px dotted currentColor;
    color: var(--tijolo);
    font: 700 max(9px, calc(2.8 * var(--u)))/1 var(--fonte-texto);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.lineup-card:hover .lineup-bio,
.lineup-card:focus-visible .lineup-bio {
    opacity: 1;
}

/* =============================================
   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;
}

/* ---------- 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);
}

/* destino de todo link "Ingressos": o título da seção, logo abaixo do menu */
#setores {
    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;
}

/* no celular, um card embaixo do outro: o lote em venda sobe para o topo,
   logo abaixo do contador (no tablet/desktop, lado a lado, volta à ordem) */
.lote.is-aberto {
    order: -1;
}

/* ---------- 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-acoes {
    align-self: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px 22px;
}

.ingressos-acoes > .btn-cta {
    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-acoes > .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-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 vertical: a altura manda, para caber inteiro em qualquer tela */
.video-modal-conteudo {
    position: relative;
    width: min(100%, calc((100svh - 88px) * 9 / 16));
}

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

.video-modal-video {
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    border-radius: 6px;
    background: #000;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* =============================================
   TABLET (768px+)
   ============================================= */
@media (min-width: 768px) {
    .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;
    }

    .lote.is-aberto {
        order: 0;
    }

    .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;
        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 {
        padding: clamp(40px, 12vw, 84px) 0 16px;
    }

    .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;
    }

    /* 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; }
}

/* =============================================
   SUPORTE PLENO (botão flutuante, montado por suporte.js)
   z-index 150: acima da navbar (100), abaixo do menu do celular (200)
   e dos modais (300), que cobrem o botão quando abertos.
   ============================================= */
.suporte {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 150;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    font-family: var(--fonte-texto);
}

.suporte-botao {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 10px;
    border: 1px solid rgba(133, 53, 30, 0.14);
    border-radius: 999px;
    background: var(--papel);
    color: var(--tijolo);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(62, 26, 16, 0.22), 0 2px 6px rgba(62, 26, 16, 0.1);
    transition: transform 0.25s var(--ease-saida), box-shadow 0.25s;
}

.suporte-botao:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(62, 26, 16, 0.28), 0 2px 6px rgba(62, 26, 16, 0.1);
}

.suporte-botao:focus-visible,
.suporte-enviar:focus-visible,
.suporte-fechar:focus-visible {
    outline: 3px solid var(--tijolo);
    outline-offset: 3px;
}

.suporte-botao-logo {
    width: 38px;
    height: 38px;
    flex: none;
    transition: transform 0.35s var(--ease-saida);
}

.suporte-botao:hover .suporte-botao-logo {
    transform: scale(1.08) rotate(-4deg);
}

.suporte-botao-texto {
    display: flex;
    flex-direction: column;
    gap: 3px;
    white-space: nowrap;
}

.suporte-botao-texto strong {
    font: 700 1.05rem/1 var(--fonte-titulo);
}

.suporte-botao-texto small {
    color: var(--terracota);
    font: 500 0.75rem/1 var(--fonte-texto);
    letter-spacing: 0.02em;
}

/* círculo tijolo com o ícone do WhatsApp; vira um X com o painel aberto */
.suporte-botao-whats {
    position: relative;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: none;
    margin-left: 4px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--terracota), var(--tijolo) 70%);
    color: var(--rosado);
}

.suporte-botao-whats svg {
    width: 26px;
    height: 26px;
}

.suporte-botao-x {
    display: none;
    font-size: 1.1rem;
    line-height: 1;
}

.suporte.is-aberto .suporte-botao-whats svg {
    display: none;
}

.suporte.is-aberto .suporte-botao-x {
    display: block;
}

/* um pulso suave no círculo, três vezes, para chamar o olhar sem cansar */
@media (prefers-reduced-motion: no-preference) {
    .suporte-botao-whats::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        box-shadow: 0 0 0 0 rgba(184, 104, 79, 0.55);
        animation: suporte-pulso 2.4s ease-out 1.5s 3;
    }
}

@keyframes suporte-pulso {
    0% { box-shadow: 0 0 0 0 rgba(184, 104, 79, 0.55); }
    70%, 100% { box-shadow: 0 0 0 14px rgba(184, 104, 79, 0); }
}

.suporte-painel {
    position: relative;
    width: min(360px, calc(100vw - 32px));
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
    padding: 22px 20px 20px;
    border-radius: 18px;
    background: var(--papel);
    color: var(--texto);
    box-shadow: 0 18px 44px rgba(62, 26, 16, 0.3);
}

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

.suporte-painel:focus {
    outline: none;
}

.suporte-opcao input:focus {
    outline: none;
}

.suporte-opcao:has(input:focus-visible) {
    outline: 2px solid var(--tijolo);
    outline-offset: 2px;
}

.suporte-fechar {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--tijolo);
    font-size: 1rem;
    cursor: pointer;
}

.suporte-fechar:hover {
    background: var(--rosado);
}

.suporte-kicker {
    margin: 0 0 2px;
    color: var(--terracota);
    font: 400 1rem var(--fonte-faixa);
    letter-spacing: 0.08em;
}

.suporte-titulo {
    margin: 0 0 6px;
    color: var(--tijolo);
    font: 700 1.6rem/1.1 var(--fonte-titulo);
}

.suporte-intro {
    margin: 0 0 14px;
    font-size: 0.9rem;
    line-height: 1.45;
}

.suporte-tipos {
    display: grid;
    gap: 6px;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.suporte-tipos legend {
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 0.9rem;
}

.suporte-opcao {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid var(--nude);
    border-radius: 12px;
    background: #fff;
    font-size: 0.92rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.suporte-opcao:has(input:checked) {
    border-color: var(--tijolo);
    background: var(--rosado);
}

.suporte-opcao input {
    accent-color: var(--tijolo);
    width: 18px;
    height: 18px;
    margin: 0;
    flex: none;
}

.suporte-campo {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
    font-weight: 700;
    font-size: 0.88rem;
}

.suporte-campo[hidden] {
    display: none;
}

.suporte-campo small {
    font-weight: 400;
    opacity: 0.7;
}

.suporte-campo input,
.suporte-campo textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--nude);
    border-radius: 10px;
    background: #fff;
    color: var(--texto);
    font: 400 1rem var(--fonte-texto);
    resize: vertical;
}

.suporte-campo input:focus,
.suporte-campo textarea:focus {
    outline: none;
    border-color: var(--tijolo);
}

.suporte-enviar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 50px;
    margin-top: 4px;
    border: 0;
    border-radius: 999px;
    background: var(--tijolo);
    color: var(--rosado);
    font: 700 1rem var(--fonte-texto);
    cursor: pointer;
    transition: background 0.2s;
}

.suporte-enviar svg {
    width: 22px;
    height: 22px;
}

.suporte-enviar:hover {
    background: var(--tijolo-escuro);
}

/* celular: só os ícones (coração + WhatsApp); o nome fica no aria-label */
@media (max-width: 767.98px) {
    .suporte {
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .suporte-botao {
        gap: 6px;
        padding: 5px 5px 5px 9px;
    }

    .suporte-botao-logo {
        width: 32px;
        height: 32px;
    }

    .suporte-botao-texto {
        display: none;
    }

    .suporte-botao-whats {
        width: 44px;
        height: 44px;
    }

    .suporte-botao-whats svg {
        width: 24px;
        height: 24px;
    }

    .suporte-painel {
        padding: 18px 16px 16px;
    }

    .suporte-intro {
        margin-bottom: 10px;
    }

    .suporte-opcao {
        padding: 8px 12px;
    }

    .suporte-campo textarea {
        min-height: 64px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .suporte-botao,
    .suporte-botao-logo {
        transition: none;
    }
}

/* =============================================
   VAGAS ESGOTADAS (esgotado: true no config.js)
   O config.js põe .is-esgotado no <html> ainda no <head>. Fora desse modo
   nada aqui vale: a faixa e o recado ficam com display: none.
   ============================================= */
:root {
    --aviso-altura: 0px;
}

.aviso-esgotado,
.esgotado-recado {
    display: none;
}

html.is-esgotado {
    --aviso-altura: 44px;
}

/* ---------- a faixa fixa no topo ----------
   z-index 120: acima da navbar (100), abaixo do menu do celular (200),
   que cobre tudo quando abre, e da abertura (500). */
html.is-esgotado .aviso-esgotado {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: var(--aviso-altura);
    padding-inline: 16px;
    overflow: hidden;
    background:
        radial-gradient(60% 140% at 50% 0%, rgba(184, 104, 79, 0.55), transparent 70%),
        linear-gradient(90deg, var(--tijolo-escuro), var(--tijolo) 28%, var(--tijolo) 72%, var(--tijolo-escuro));
    color: var(--rosado);
    border-bottom: 1px solid rgba(223, 185, 166, 0.35);
    box-shadow: 0 8px 22px rgba(62, 26, 16, 0.22);
    white-space: nowrap;
}

/* brilho que atravessa a faixa de tempos em tempos */
.aviso-esgotado-luz {
    position: absolute;
    inset: 0 auto 0 0;
    width: 160px;
    background: linear-gradient(100deg, transparent, rgba(245, 232, 226, 0.22), transparent);
    transform: translateX(-200px) skewX(-18deg);
    pointer-events: none;
}

.aviso-esgotado-selo {
    position: relative;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    background: var(--rosado);
    box-shadow: 0 0 0 3px rgba(245, 232, 226, 0.18);
}

.aviso-esgotado-selo img {
    width: 17px;
    height: 17px;
}

.aviso-esgotado-titulo {
    position: relative;
    padding-top: 0.12em;
    font-family: var(--fonte-faixa);
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--papel);
}

.aviso-esgotado-estrela {
    position: relative;
    font-size: 0.8rem;
    color: var(--nude);
}

.aviso-esgotado-texto {
    position: relative;
    font-family: var(--fonte-mao);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--nude);
}

@media (max-width: 379.98px) {
    .aviso-esgotado-estrela,
    .aviso-esgotado-texto {
        display: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .aviso-esgotado-luz {
        animation: avisoLuz 5s 1.2s ease-in-out infinite;
    }

    .aviso-esgotado-selo img {
        animation: avisoBate 2.4s ease-in-out infinite;
    }

    .aviso-esgotado-estrela {
        animation: avisoBrilha 2.4s ease-in-out infinite;
    }
}

@keyframes avisoLuz {
    0% { transform: translateX(-200px) skewX(-18deg); }
    45%, 100% { transform: translateX(calc(100vw + 40px)) skewX(-18deg); }
}

@keyframes avisoBate {
    0%, 60%, 100% { transform: scale(1); }
    20% { transform: scale(1.18); }
    40% { transform: scale(1.06); }
}

@keyframes avisoBrilha {
    50% { opacity: 0.35; transform: scale(0.8) rotate(45deg); }
}

/* a navbar desce para baixo da faixa e, ao esconder, passa por trás dela */
html.is-esgotado .navbar {
    top: var(--aviso-altura);
}

html.is-esgotado .navbar.is-hidden {
    transform: translateY(calc(-100% - var(--aviso-altura)));
}

html.is-esgotado .hero {
    padding-top: calc(var(--nav-altura) + var(--aviso-altura) + 8px);
}

html.is-esgotado #setores {
    scroll-margin-top: calc(var(--nav-altura) + var(--aviso-altura) + 24px);
}

/* ---------- seção de ingressos ---------- */
/* o recado fica acima dos lotes, no lugar dos botões de compra */
html.is-esgotado .ingressos-acoes,
html.is-esgotado .btn-convite {
    display: none;
}

html.is-esgotado .esgotado-recado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 560px;
    margin: 0 auto clamp(34px, 4.6vw, 50px);
    text-align: center;
}

.esgotado-recado-faixa {
    font-size: clamp(2rem, 6vw, 2.6rem);
    letter-spacing: 0.08em;
    transform: rotate(-2deg);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.esgotado-recado-texto {
    font-size: clamp(1rem, 2.6vw, 1.12rem);
    line-height: 1.55;
    color: var(--rosado);
}

.esgotado-recado-nota {
    font-size: 0.86rem;
    color: var(--nude);
}

/* o ingresso fica à mostra, apagado, com o carimbo por cima */
.lote.is-esgotado .ticket {
    pointer-events: none;
}

.lote.is-esgotado .ticket > * {
    opacity: 0.5;
    filter: grayscale(0.35);
}

.lote.is-esgotado .ticket-topo {
    opacity: 1;
    filter: none;
}

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

.lote.is-esgotado .ticket::after {
    content: 'esgotado';
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0.16em 0.5em 0.04em;
    border: 3px solid var(--tijolo);
    border-radius: 10px;
    outline: 1.5px solid var(--tijolo);
    outline-offset: 4px;
    background: rgba(251, 245, 242, 0.9);
    font-family: var(--fonte-faixa);
    font-size: clamp(2.6rem, 9vw, 3.4rem);
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tijolo);
    white-space: nowrap;
    transform: translate(-50%, -50%) rotate(-12deg);
    box-shadow: 0 10px 26px rgba(62, 26, 16, 0.18);
}

/* =============================================
   REABERTURA COM CONTADOR (reabertura no config.js)
   Antes da hora, o config.js põe .is-esgotado E .is-reabrindo no <html>:
   vale tudo do modo esgotado acima (faixa, navbar, lotes fechados), mas a
   faixa e o recado trocam o "esgotado" pelo relógio [data-reabre-relogio].
   ============================================= */
.aviso-reabre,
.reabre-recado {
    display: none;
}

html.is-reabrindo .aviso-esgotado-titulo,
html.is-reabrindo .aviso-esgotado-estrela,
html.is-reabrindo .aviso-esgotado-texto,
html.is-reabrindo .esgotado-recado {
    display: none;
}

html.is-reabrindo .aviso-reabre {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.aviso-reabre-texto {
    font-family: var(--fonte-mao);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--nude);
}

/* largura fixa por dígito: o relógio não treme a cada segundo */
.aviso-reabre-relogio {
    padding-top: 0.12em;
    font-family: var(--fonte-faixa);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    color: var(--papel);
}

html.is-reabrindo .reabre-recado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 560px;
    margin: 0 auto clamp(34px, 4.6vw, 50px);
    text-align: center;
}

.reabre-recado-faixa {
    font-size: clamp(2rem, 6vw, 2.6rem);
    letter-spacing: 0.08em;
    transform: rotate(-2deg);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.reabre-recado-texto {
    font-size: clamp(1rem, 2.6vw, 1.12rem);
    line-height: 1.55;
    color: var(--rosado);
}

.reabre-recado-texto strong {
    color: var(--papel);
}

.reabre-recado-relogio {
    font-family: var(--fonte-faixa);
    font-size: clamp(3.4rem, 12vw, 5rem);
    line-height: 1;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    color: var(--papel);
}

/* =============================================
   ENCERRAMENTO DAS INSCRIÇÕES (encerramento no config.js)
   Antes da hora: .is-encerrando, contador na seção de ingressos e as
   vendas seguem normais. Depois: .is-esgotado E .is-encerrado, vale todo o
   modo esgotado, só que com "Inscrições encerradas" no lugar de "esgotado".
   ============================================= */
.so-encerrado,
.encerrado-recado,
.encerra-recado {
    display: none;
}

html.is-encerrado .so-esgotado,
html.is-encerrado .esgotado-recado {
    display: none;
}

html.is-encerrado .so-encerrado {
    display: inline;
}

html.is-encerrado .encerrado-recado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 560px;
    margin: 0 auto clamp(34px, 4.6vw, 50px);
    text-align: center;
}

/* "Inscrições encerradas" é mais comprido que "Vagas esgotadas": o texto
   ao lado sai mais cedo para a faixa não estourar no celular */
@media (max-width: 559.98px) {
    html.is-encerrado .aviso-esgotado-estrela,
    html.is-encerrado .aviso-esgotado-texto {
        display: none;
    }
}

html.is-encerrado .lote.is-esgotado .ticket::after {
    content: 'encerrado';
}

html.is-encerrando .encerra-recado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 560px;
    margin: 0 auto clamp(34px, 4.6vw, 50px);
    text-align: center;
}

.encerra-relogio {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(6px, 2vw, 14px);
    margin-top: 4px;
}

.encerra-bloco {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: clamp(58px, 17vw, 84px);
    padding: 12px 6px 10px;
    border: 1px solid rgba(223, 185, 166, 0.35);
    border-radius: 14px;
    background: rgba(245, 232, 226, 0.08);
}

/* largura fixa por dígito: o relógio não treme a cada segundo */
.encerra-bloco strong {
    padding-top: 0.08em;
    font-family: var(--fonte-faixa);
    font-weight: 400;
    font-size: clamp(2.4rem, 9vw, 3.4rem);
    line-height: 1;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--papel);
}

.encerra-bloco small {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nude);
}

.encerra-sep {
    padding-top: 0.32em;
    font-family: var(--fonte-faixa);
    font-size: clamp(2rem, 7vw, 2.8rem);
    line-height: 1;
    color: var(--nude);
}

.ticket-status--esgotado {
    border-color: transparent;
    background: var(--tijolo);
    color: var(--papel);
}