/* ═══════════════════════════════════════════════════════════
   EXTEMPORÂNEA 2026 — cards ONDA (estilo V5)
   Imagem com ondas SVG em cima/baixo · legenda em overlay
   Ordem: 1 artistas · 2 performance · 3 local
   ═══════════════════════════════════════════════════════════ */

/* ── FUNDO DA PÁGINA INTEIRA (imagem final do festival) — só na onda ──
   Imagem ancorada ao TOPO (center top) — hero fica na parte PÁLIDA da
   imagem (a nuvem do logótipo). À largura toda, ROLA COM A PÁGINA
   (scroll) para a imagem ir aparecendo à medida que se desce. */
.page-onda{
  background:url('../assets/hero/bg-seamless.jpg?v=5') center top / 100% auto repeat-y scroll;
  background-color:var(--paper);
}
.page-onda main{ background:transparent; }
.page-onda .hero{ background:transparent; }
.page-onda .hero__bg{ display:none; }
.page-onda .sobre,
.page-onda .programa,
.page-onda .info{ background:transparent; }
/* rodapé sem bege — deixa ver a imagem de fundo do festival */
.page-onda .footer{ background:transparent; }
/* mobile: fixed cover não se comporta bem — imagem à largura, ancorada ao topo */
@media (max-width:600px){
  .page-onda{ background-attachment:scroll; background-size:100% auto; }
}

/* logo centrado a meio da largura do hero */
.page-onda .hero__logo{ margin-left:auto; margin-right:auto; }
/* data + linha de info centradas, a acompanhar o logo centrado */
.page-onda .hero__base{ justify-content:center; }
.page-onda .hero__meta{ text-align:center; }
/* data com as características do Figma — Thunder Light, grande, azul #00B0FF.
   Glow = cópia desfocada por baixo (blur gaussiano progressivo, como o Figma),
   com o número nítido por cima a manter a leitura. */
.page-onda .hero__date{
  position:relative; isolation:isolate;
  font-weight:300;
  font-size:clamp(3rem, 9vw, 8rem);
  line-height:.92;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#00B0FF;
}
.page-onda .hero__date::before{
  content:'11.07.2026';
  position:absolute; inset:0; z-index:-1;
  text-align:center; letter-spacing:inherit; color:#00B0FF;
  filter:blur(19.95px);
  pointer-events:none;
}
.page-onda .hero__date span{ color:inherit; }
/* linha de info do hero a 16px */
.page-onda .hero__info{ font-size:16px; }
/* subir a data + info para não ficarem por cima do indicador SCROLL */
.page-onda .hero{ padding-bottom:clamp(120px, 18vh, 180px); }
/* véu de nuvens a CLAREAR em vez de escurecer (screen em vez de soft-light)
   + opacidade mais baixa para a imagem da hero ficar mais clara/limpa */
.page-onda .hero__veil{ mix-blend-mode:screen; opacity:.3; }
/* navbar a light */
.page-onda .nav__link,
.page-onda .nav__lang,
.page-onda .nav__mark{ font-weight:300; }
/* links do menu a 12.8px */
.page-onda .nav__link{ font-size:12.8px; }
/* logo da navbar um pouco maior */
.page-onda .nav__logo{ height:clamp(38px,4.3vw,58px); }
.page-onda .nav.is-scrolled .nav__logo{ height:clamp(32px,3.5vw,47px); }
/* marquee (ticker) — letras azul claro (= data do hero), fundo branco a 50%,
   fonte regular com 0.2em de espaçamento, bolinha (•) a separar */
.page-onda .ticker{ background:rgba(255,255,255,.7); border-color:rgba(255,255,255,.4); }
.page-onda .ticker__run span{ color:#00B0FF; font-weight:700; letter-spacing:.2em; font-size:calc(clamp(1.1rem, 2.2vw, 1.8rem) - 4px); }
.page-onda .ticker__run span i{ color:inherit; }
/* footer tape — igual ao ticker do hero: banda branca translúcida + texto azul #00B0FF */
.page-onda .footer__tape .tape__run{ background:rgba(255,255,255,.7); }
.page-onda .footer__tape .tape__run span{ color:#00B0FF; font-weight:700; letter-spacing:.2em; font-size:calc(clamp(1.1rem, 2.2vw, 1.8rem) - 4px); }
.page-onda .footer__tape .tape__run span i{ color:inherit; }

/* link do logo Balleteatro no rodapé (para o site oficial) */
.page-onda .footer__bar-link{ transition:opacity .3s var(--e-out); }
.page-onda .footer__bar-link:hover{ opacity:.65; }

/* labels alinhadas pelo topo (mesma linha) e logos centrados pelo meio
   numa célula de altura comum, para os logos ficarem alinhados pelo centro */
.page-onda .footer__bar{ align-items:flex-start; }
.page-onda .footer__bar-cell{
  display:flex; align-items:center; line-height:0;
  height:clamp(32px,3.8vw,46px);
}
.page-onda .footer__bar-lab{ letter-spacing:.08em; }

/* logo do Balleteatro no footer (substitui o wordmark de texto) */
.page-onda .footer__brand img{ height:clamp(34px,6vw,62px); width:auto; display:block; }

/* data da secção info — 5px mais pequena e light (mesmo peso do destaque do Sobre) */
.page-onda .info__date{ font-weight:700; font-size:calc(clamp(4rem,18vw,15rem) - 5px); }
/* hora + local da Info maiores */
.page-onda .info__line{ font-size:clamp(1rem,1.9vw,1.45rem); letter-spacing:.18em; }

/* títulos SOBRE / PROGRAMA com o aspecto do logótipo Extemporânea:
   azul brilhante + glow cyan; as letras ondulam (split em .wv pelo app.js) */
.page-onda .section__title{
  color:#00A8FC;
  text-shadow:0 0 16px rgba(0,168,252,.55), 0 0 40px rgba(0,168,252,.32);
}
.page-onda .section__title .wv{ display:inline-block; }

/* SOBRE — teaser: destaque + "Saber mais"; o botão revela o resto (#sobre-more) */
.page-onda .sobre__lead-wrap{ margin-bottom:clamp(26px,3.5vh,48px); }
.page-onda #sobre-more{ margin-top:clamp(34px,5vh,64px); }

/* ── SLIDER (Versão A) — setas + progresso, sem arrasto ── */
.slider{ position:relative; }
.slider__viewport{ overflow:hidden; padding:14px 0; }
.slider__track{
  display:flex; align-items:center; gap:clamp(20px,3vw,56px);
  padding:0 var(--pad); width:max-content;
  transition:transform .7s var(--e-out); will-change:transform;
}
.slider__controls{
  display:flex; align-items:center; justify-content:center; gap:clamp(16px,3vw,30px);
  margin-top:clamp(22px,4vh,44px); padding:0 var(--pad);
}
/* setas com o aspecto do chip de localização: stroke + seta branca */
.slider__nav{
  flex:none; width:50px; height:50px;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(26,26,46,.34); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:#fff; font-size:1.3rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s, border-color .3s, opacity .3s;
}
.slider__nav:hover{ background:rgba(26,26,46,.58); border-color:#fff; }
.slider__nav:disabled{ opacity:.3; cursor:not-allowed; }
.slider__progress{ display:flex; align-items:center; gap:8px; width:min(320px,46vw); }
.seg{ flex:1; height:6px; border:none; padding:0; background:rgba(0,108,228,.22); cursor:pointer; transition:background .45s var(--e-out), flex-grow .6s var(--e-out); }
.seg.is-active{ background:var(--blue); flex-grow:2.2; }

/* desktop/tablet: as 3 cartas lado a lado, SEM navegação */
@media (min-width:601px){
  .slider__controls{ display:none; }
  .slider__viewport{ overflow:visible; }
  .slider__track{
    display:grid; grid-template-columns:repeat(3,1fr);
    width:auto; max-width:var(--max); margin:0 auto;
    gap:clamp(20px,3vw,48px); transform:none !important;
  }
  .slider__track .card--onda{ width:auto; min-width:0; }
  .slider__track .card--onda .card__media{ min-width:0; }
}

/* mobile: slider com setas, sem a barra de segmentos */
@media (max-width:600px){
  .slider__progress{ display:none; }
  .slider__controls{ justify-content:center; gap:clamp(48px,22vw,90px); }
}

.card--onda{ width:clamp(280px, 40vw, 460px); cursor:pointer; }
.card--onda .card__btn{ transition:transform .5s var(--e-out); }
.card--onda .card__btn:hover{ transform:translateY(-6px); }
/* sem numeração no canto superior direito */
.card--onda .card__num{ display:none; }

.card--onda .card__media{
  position:relative; display:block; width:100%; aspect-ratio:3/4; overflow:hidden;
  background:var(--blue-soft);
  /* drop shadow suave e elegante */
  box-shadow:0 18px 44px -16px rgba(7,40,96,.38), 0 6px 16px -10px rgba(7,40,96,.28);
  transition:box-shadow .5s var(--e-out);
}
.card--onda .card__btn:hover .card__media{
  box-shadow:0 30px 64px -18px rgba(7,40,96,.46), 0 10px 22px -10px rgba(7,40,96,.32);
}
.card--onda .card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--e-out);
}
.card--onda .card__btn:hover .card__media img{ transform:scale(1.05); }

/* ONDA contínua (como o _v5.html) — uma só curva no topo e na base de
   toda a faixa do programa, cor do fundo, cards planos por baixo */
.rail--onda{ padding:0; }
.rail--onda .rail__stage{ position:relative; }
.rail__wave{ position:absolute; left:0; right:0; width:100%; height:clamp(36px,6vw,82px); z-index:6; pointer-events:none; line-height:0; }
.rail__wave svg{ display:block; width:100%; height:100%; }
.rail__wave svg path{ fill:var(--paper); }
.rail__wave--top{ top:-1px; }
.rail__wave--bottom{ bottom:-1px; transform:scaleY(-1); }

/* número */
.card__num{
  position:absolute; top:clamp(16px,2.4vw,28px); right:14px; z-index:4;
  font-weight:300; font-size:clamp(1.4rem,2.2vw,2.2rem); line-height:.8; letter-spacing:.05em;
  color:var(--paper); text-shadow:0 2px 14px rgba(26,26,46,.55);
}

/* legenda — gradiente na base, ordem artistas → performance → local */
.card__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:clamp(110px,26vh,240px) 18px clamp(22px,3vw,34px); text-align:center; color:var(--paper);
  /* NORMAL — gradiente grande no tom do texto PROGRAMA (#00A8FC) */
  background:linear-gradient(180deg,
    rgba(0,168,252,0) 0%,
    rgba(0,168,252,.14) 30%,
    rgba(0,168,252,.42) 62%,
    rgba(0,168,252,.78) 100%);
  transition:background .55s var(--e-out), padding .55s var(--e-out);
}
/* HOVER — gradiente mais pequeno e suave (navy ténue) */
.card--onda .card__btn:hover .card__cap{
  padding-top:clamp(60px,12vh,120px);
  background:linear-gradient(180deg,
    rgba(0,108,228,0) 0%,
    rgba(0,98,212,.06) 28%,
    rgba(0,88,196,.18) 50%,
    rgba(8,58,128,.4) 74%,
    rgba(7,40,96,.66) 100%);
}
/* 1 · artistas — formatação da performance (regular e mais pequeno) */
.card__artists{
  font-family:var(--font); font-weight:400;
  font-size:clamp(.9rem,1.8vw,1.3rem); letter-spacing:.14em;
  text-transform:uppercase; color:rgba(250,250,245,.92); line-height:1.1;
}
/* 2 · performance — formatação dos artistas (destaque, grande e bold) */
.card__title{
  display:block; color:var(--paper);
  font-weight:700; font-size:clamp(1.8rem,4.2vw,3.1rem);
  letter-spacing:.02em; line-height:.98;
}
/* 3 · seta para o pop-up de detalhes (azul-glow do logo) */
.card__arrow{
  margin-top:10px; line-height:1; font-size:1.5rem; font-weight:300;
  color:#fff;
  text-shadow:0 0 14px rgba(255,255,255,.55), 0 1px 8px rgba(12,60,128,.5);
  transform:translateY(2px); opacity:.92;
  transition:transform .4s var(--e-out), opacity .4s var(--e-out), color .4s var(--e-out), text-shadow .4s var(--e-out);
}
.card--onda .card__btn:hover .card__arrow{
  transform:translate(3px,-3px); opacity:1;
  color:var(--blue-bright); text-shadow:0 0 14px rgba(0,168,252,.55), 0 1px 8px rgba(12,60,128,.5);
}

/* ═══════════════════════════════════════════════════════════
   POP-UP (modal) — redesign Figma · só na onda
   Apenas visual; comportamento (abrir/fechar/navegação/scroll/i18n) intacto
   ═══════════════════════════════════════════════════════════ */
/* moldura: SEM borda sólida — gradiente azul vira halo difuso (sem limite rígido);
   cantos 16px, interior #F2FBFF, imagem fica a toda a largura */
.page-onda .modal__panel{
  --accent:#0E6FB8;
  border:none;
  border-radius:0;
  background-color:#D9EEFF;
  /* véu azul suave (#D9EEFF) por cima da imagem — ténue */
  background-image:
    linear-gradient(rgba(217,238,255,.4), rgba(217,238,255,.4)),
    url('../assets/modal/popup-bg.jpg');
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:local;
  box-shadow:
    0 0 30px 2px rgba(0,113,236,.16),
    0 0 70px 12px rgba(120,200,250,.42),
    0 34px 100px rgba(26,26,46,.26);
}

/* imagem a TODA a largura do pop-up. O aspect-ratio:16/9 + max-height do base
   fazia o browser ENCOLHER a largura para manter a proporção (imagem só à
   esquerda). Aqui largura 100% definida + altura controlada (sem aspect-ratio)
   → encosta às duas margens. */
.page-onda .modal__hero{
  width:100%;
  aspect-ratio:auto;
  height:clamp(260px, 44vh, 460px);
  max-height:none;
}

/* navegação flutua sobre a imagem, ao canto — sem faixa/barra.
   setas + ✕ em botões brancos circulares, frosted (elegante e suave) */
.page-onda .modal__bar{
  position:absolute; top:16px; left:16px; right:16px; z-index:6;
  padding:0; background:transparent;
  justify-content:flex-end; align-items:center; gap:12px;
}
.page-onda .modal__count{ display:none; }
.page-onda .modal__step,
.page-onda .modal__close{
  width:42px; height:42px; border-radius:0;
  background:rgba(0,108,228,.16); border:1px solid rgba(0,108,228,.55); color:var(--blue);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 4px 18px rgba(26,26,46,.18);
  transition:background .35s var(--e-out), border-color .35s var(--e-out), transform .35s var(--e-out);
}
.page-onda .modal__step:hover,
.page-onda .modal__close:hover{ background:rgba(0,108,228,.28); border-color:var(--blue); color:var(--blue); transform:none; }

/* título + nome dos artistas com a MESMA formatação do card do programa:
   título peso 700 tracking curto; artistas MAIORES, regular, tracked, uppercase */
.page-onda .modal__title{ font-weight:700; letter-spacing:.02em; }
.page-onda .modal__kicker{ letter-spacing:.22em; }
.page-onda .modal__authors{
  font-weight:400; font-size:clamp(.9rem,1.8vw,1.3rem);
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(250,250,245,.92); line-height:1.1; opacity:1;
}

/* corpo numa só coluna — DATA passou para o chip do hero;
   o LOCAL (com o detalhe) fica numa linha logo após a imagem, antes da sinopse */
.page-onda .modal__body{ grid-template-columns:1fr; }
.page-onda .modal__aside{ display:none; }
.page-onda .modal__where{ margin-bottom:24px; color:#0C3C80; font-weight:600; font-size:.92rem; letter-spacing:.1em; }
/* subtítulos SINOPSE / BIOGRAFIAS — bold e maiores, azul claro igual ao título do Sobre */
.page-onda .block-label{
  color:#00A8FC; font-weight:800; font-size:1.02rem; letter-spacing:.16em;
  text-shadow:none;
}
/* corpo — Thunder regular, azul escuro */
.page-onda .modal__main p{
  font-family:var(--font); font-weight:400;
  font-size:1.22rem; line-height:1.68; letter-spacing:.07em; color:#0C3C80;
}
.page-onda .modal__main p strong{ color:#0C3C80; font-weight:700; }

/* outras performances — cartas O MAIS PEQUENAS possível com a imagem QUADRADA da
   performance e o título POR CIMA (branco, weight 800). Largura ~100px: só o
   suficiente para o título caber (pode partir em 2 linhas). */
.page-onda .modal__others-label{ color:#4A4A6A; }
.page-onda .modal__others-grid{ display:flex; flex-wrap:wrap; gap:14px; }
.page-onda .other-card{
  display:block; width:100px; padding:0; background:none; border:none;
}
.page-onda .other-card:hover{ box-shadow:none; transform:translateY(-3px); }
.page-onda .other-card__media{
  position:relative; display:block; width:100%; aspect-ratio:1/1; overflow:hidden;
  background:var(--blue-soft);
  box-shadow:0 8px 20px -10px rgba(7,40,96,.45);
  transition:box-shadow .4s var(--e-out);
}
.page-onda .other-card:hover .other-card__media{ box-shadow:0 14px 30px -12px rgba(7,40,96,.5); }
.page-onda .other-card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--e-out);
}
.page-onda .other-card:hover .other-card__media img{ transform:scale(1.06); }
/* legenda — gradiente COMPRIDO (começa a meio do quadrado) + título branco
   weight 800 a ocupar a largura toda (sem margens laterais) */
.page-onda .other-card__cap{
  position:absolute; left:0; right:0; top:0; bottom:0; z-index:2;
  display:flex; align-items:flex-end;
  padding:0 6px 7px;
  /* mesmo tom dos cards do programa (#00A8FC), mas com cor desde o topo */
  background:linear-gradient(180deg,
    rgba(0,168,252,.26) 0%,
    rgba(0,168,252,.42) 45%,
    rgba(0,168,252,.6) 72%,
    rgba(0,168,252,.8) 100%);
}
.page-onda .other-card__title{
  width:100%; text-align:center;
  color:var(--paper); font-weight:800;
  font-size:1.2rem; letter-spacing:.06em; line-height:.96;
  text-transform:uppercase;
}