/* =========================================================
   UPPER CONFERENCE 2026 — DESKTOP + MOBILE (arquivo único)
   Breakpoint: 768px
   >= 769px  → estilos "desktop" (regras base deste arquivo)
   <= 768px  → estilos "mobile"  (bloco @media no final)
   ========================================================= */

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

:root {
  --red: #de211c;
  --yellow: #f7c852;
  --font-display: 'Bebas Neue', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  width: 100%;
  background: #000;
  overflow-x: hidden;
}

img, picture { display: block; max-width: none; }
picture img { width: 100%; height: 100%; }

main { display: block; }

/* Helpers de visibilidade por breakpoint */
.mobile-only { display: none; }
.desktop-only { display: block; }

/* =========================================================
   BASE — Seções que replicam 1:1 as artes do Photoshop.
   Cada .section-canvas mantém a proporção exata da arte
   (aspect-ratio) e todo posicionamento interno é feito em %,
   então escala proporcionalmente em qualquer largura de tela
   dentro do mesmo breakpoint.
   ========================================================= */

.section-canvas {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
}

.bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  user-select: none;
  pointer-events: none;
}
.bg-layer img { object-fit: cover; }

/* CTAs (links) — usados nas seções 1, 4 e 6 */
.cta-btn {
  position: absolute;
  display: block;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.cta-btn picture, .cta-btn img { width: 100%; display: block; user-select: none; pointer-events: none; }
.cta-btn:hover { transform: scale(1.04); filter: brightness(1.06); }
.cta-btn:active { transform: scale(0.97); }
.cta-btn:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 4px; border-radius: 2px; }

/* =========================================================
   SEÇÃO 1 — HERO   |  Desktop canvas 1920x1080
   ========================================================= */
.section-1 { aspect-ratio: 1920 / 1080; background: #F7C948; }

.s1-titulo { position: absolute; top: 25.2778%; left: 0; width: 100%; z-index: 2; pointer-events: none; user-select: none; }
.s1-data   { position: absolute; top: 16.3889%; left: 38.4375%; width: 23.125%; z-index: 3; pointer-events: none; user-select: none; }
.s1-selo   { position: absolute; top: 52.1296%; left: 80.3646%; width: 13.8021%; z-index: 4; }
.s1-cta    { top: 77.3148%; left: 33.4375%; width: 33.0208%; z-index: 5; }

/* =========================================================
   SEÇÃO 2 — O QUE É A UPPER CONF?   |  Desktop canvas 1920x1080
   ========================================================= */
.section-2 { aspect-ratio: 1920 / 1080; background: #de211c; }

.s2-fotos  { position: absolute; top: 17.4074%; left: 7.6042%; width: 36.0417%; z-index: 2; }
.s2-titulo { position: absolute; top: 17.9630%; left: 50.8854%; width: 40.9896%; z-index: 2; pointer-events: none; user-select: none; }
.s2-tx     { position: absolute; top: 37.5926%; left: 49.0625%; width: 44.2188%; z-index: 2; pointer-events: none; user-select: none; }

/* =========================================================
   SEÇÃO 3 — SALA PROFÉTICA   |  Desktop canvas 1920x1080
   Painel esquerdo (foto) + painel direito (fundo amarelo)
   ========================================================= */
.section-3 { aspect-ratio: 1920 / 1080; background: #f7c852; }

.s3-foto-porta { width: 37.1354%; height: 100%; }
.s3-foto-porta img { object-fit: cover; }

.s3-bg-right {
  position: absolute;
  top: 0;
  left: 37.1354%;
  width: 62.8646%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
.s3-bg-right img { object-fit: cover; }

.s3-logo { position: absolute; top: 0; left: 48.0729%; width: 40.9896%; z-index: 2; pointer-events: none; user-select: none; }
.s3-tx   { position: absolute; top: 54.0741%; left: 39.0104%; width: 56.25%; z-index: 2; pointer-events: none; user-select: none; }

/* =========================================================
   SEÇÃO 4 — LINE-UP   |  Desktop canvas 1920x2721
   ========================================================= */
.section-4 { aspect-ratio: 1920 / 2721; background: #a6e615; }

.s4-titulo { position: absolute; top: 6.5057%;  left: 13.8021%; width: 75.4167%; z-index: 2; pointer-events: none; user-select: none; }
.s4-fotos  { position: absolute; top: 15.1046%; left: 10.8333%; width: 84.6875%; z-index: 2; pointer-events: none; user-select: none; }
.s4-cta    { top: 91.7310%; left: 33.4375%; width: 33.0208%; z-index: 3; }
.s4-dupla  { display: none; } /* só aparece no breakpoint mobile */

/* =========================================================
   SEÇÃO 5 — DATA E LOCAL   |  Desktop canvas 1920x1080
   ========================================================= */
.section-5 { aspect-ratio: 1920 / 1080; background: #f7c852; }

.s5-data  { position: absolute; top: 16.7593%; left: 5.7292%;  width: 59.7917%; z-index: 2; pointer-events: none; user-select: none; }
.s5-mes   { position: absolute; top: 24.6296%; left: 69.0104%; width: 19.9479%; z-index: 2; pointer-events: none; user-select: none; }
.s5-foto  { position: absolute; top: 40.2778%; left: 0; width: 100%; z-index: 1; pointer-events: none; user-select: none; }
.s5-local { position: absolute; top: 72.4074%; left: 49.0104%; width: 39.4271%; z-index: 2; pointer-events: none; user-select: none; }

/* =========================================================
   SEÇÃO 6 — GARANTA SUA VAGA / LOTE 01   |  Desktop canvas 1920x1906
   ========================================================= */
.section-6 { aspect-ratio: 1920 / 1906; background: #111; }

.s6-titulo { position: absolute; top: 10.0210%; left: 10.9375%; width: 78.1771%; z-index: 2; pointer-events: none; user-select: none; }
.s6-tx     { position: absolute; top: 33.3684%; left: 21.1458%; width: 57.8125%; z-index: 2; pointer-events: none; user-select: none; }
.s6-ticket { position: absolute; top: 25.4459%; left: 0; width: 100%; z-index: 1; pointer-events: none; user-select: none; }
.s6-cta    { top: 85.9370%; left: 33.3333%; width: 33.0208%; z-index: 3; }

/* =========================================================
   SEÇÃO 7 — FAQ (construída manualmente)
   Cresce em altura naturalmente conforme itens são
   adicionados no array `faqData` em script.js
   ========================================================= */
.section-7 {
  background: var(--red);
  width: 100%;
  padding: 100px 0;
}

.s7-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
  align-items: flex-start;
  gap: 60px;
}

.s7-icon {
  flex: 0 0 260px;
  width: 260px;
  position: sticky;
  top: 80px;
  user-select: none;
  pointer-events: none;
}

.s7-content { flex: 1 1 auto; min-width: 0; }

.s7-heading {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--yellow);
  font-size: clamp(40px, 4.5vw, 64px);
  margin-bottom: 40px;
  line-height: 1;
}

.faq-accordion { display: flex; flex-direction: column; }

.faq-item { border-top: 1px solid var(--yellow); }
.faq-item:last-child { border-bottom: 1px solid var(--yellow); }

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 26px 4px;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--yellow);
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: 0.3px;
  line-height: 1.1;
}
.faq-question:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }

.faq-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 2px solid var(--yellow);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--yellow);
  transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease;
}
.faq-item.open .faq-icon { transform: rotate(135deg); background: var(--yellow); color: var(--red); }

.faq-answer-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease; }
.faq-item.open .faq-answer-wrap { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; }
.faq-answer-inner p {
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  padding: 0 4px 28px 4px;
  max-width: 62ch;
}

/* =========================================================
   ANIMAÇÕES DE ENTRADA
   Elementos com a classe .reveal partem invisíveis/deslocados
   e "entram" quando cruzam o viewport (via IntersectionObserver
   em script.js), que adiciona a classe .is-visible.
   data-anim controla a direção; data-delay (ms) escalona.
   ========================================================= */

.reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.7s cubic-bezier(.22,.61,.36,1), transform 0.7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal[data-anim="left"]  { transform: translateX(-60px); }
.reveal[data-anim="right"] { transform: translateX(60px); }
.reveal[data-anim="scale"] { transform: scale(0.85); }

.reveal.is-visible { opacity: 1; transform: translate(0, 0) scale(1); }

/* Garante que o hover de "zoom" dos CTAs continue funcionando
   normalmente depois que a animação de entrada já terminou */
.cta-btn.reveal.is-visible:hover { transform: scale(1.04); }
.cta-btn.reveal.is-visible:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .faq-answer-wrap, .faq-icon, .cta-btn { transition: none !important; }
}


/* =========================================================================
   =========================================================================
   MOBILE — breakpoint <= 768px
   Reposiciona cada elemento usando os percentuais calculados sobre os
   canvases mobile (620px de largura de referência), troca aspect-ratio
   de cada seção e ativa o grid de fotos individuais da seção 4.
   =========================================================================
   ========================================================================= */
@media (max-width: 768px) {

  .mobile-only { display: block; }
  .desktop-only { display: none; }

  .section-canvas { max-width: 620px; }

  /* ---------- SEÇÃO 1 — canvas 620x766 ---------- */
  .section-1 { aspect-ratio: 620 / 766; }
  .s1-titulo { top: 24.9347%; left: 0; width: 100%; }
  .s1-data   { top: 14.6214%; left: 22.5806%; width: 55.1613%; }
  .s1-selo   { top: 53.6554%; left: 64.1935%; width: 20.8065%; }
  .s1-cta    { top: 75.5875%; left: 11.2903%; width: 77.5806%; }

  /* ---------- SEÇÃO 2 — canvas 620x1669 ---------- */
  .section-2 { aspect-ratio: 620 / 1669; }
  .s2-fotos  { top: 6.1114%;  left: 8.2258%;  width: 83.7097%; }
  .s2-titulo { top: 44.7574%; left: 14.0323%; width: 71.4516%; }
  .s2-tx     { top: 58.4181%; left: 5.0%;     width: 90.1613%; }

  /* ---------- SEÇÃO 3 — canvas 620x1837 (foto em cima, texto embaixo) ---------- */
  .section-3 { aspect-ratio: 620 / 1837; }
  .s3-foto-porta {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 40.6641%;
  }
  .s3-bg-right {
    top: 40.6641%; left: 0;
    width: 100%; height: 59.3359%;
  }
  .s3-logo { top: 42.1339%; left: 7.0968%;  width: 85.9677%; }
  .s3-tx   { top: 66.7937%; left: 5.0%;     width: 90.1613%; }

  /* ---------- SEÇÃO 4 — canvas 620x2060 (4 duplas empilhadas, com leve sobreposição) ---------- */
  .section-4 { aspect-ratio: 620 / 2060; }
  .s4-titulo { top: 5.7767%; left: 10.8065%; width: 78.5484%; }

  /* Cada dupla é uma imagem única; as de baixo entram por cima
     (z-index maior) do rodapé das de cima, criando a sobreposição
     da arte de referência. A última dupla (Filipe + iir) fica
     encostada na borda direita, sem nenhuma margem/padding. */
  .s4-dupla {
    display: block;
    position: absolute;
    width: 91.9355%;
    z-index: 2;
    user-select: none;
    pointer-events: none;
  }
  .s4-dupla-1 { top: 11.6505%; left: 4.0323%; z-index: 2; }
  .s4-dupla-2 { top: 32.2816%; left: 4.0323%; z-index: 3; }
  .s4-dupla-3 { top: 51.4078%; left: 4.0323%; z-index: 4; }
  .s4-dupla-4 { top: 68.9320%; right: 0; left: auto; z-index: 5; }

  .s4-cta { top: 92.1845%; left: 11.2903%; width: 77.5806%; }

  /* ---------- SEÇÃO 5 — canvas 620x687 ---------- */
  .section-5 { aspect-ratio: 620 / 687; }
  .s5-data  { top: 14.9927%; left: 12.7419%; width: 74.5161%; }
  .s5-mes   { top: 43.8137%; left: 13.8710%; width: 40.9677%; }
  .s5-foto  { top: 49.3450%; left: 0; width: 100%; }
  .s5-local { top: 74.5269%; left: 29.8387%; width: 61.1290%; }

  /* ---------- SEÇÃO 6 — canvas 620x1322 ---------- */
  .section-6 { aspect-ratio: 620 / 1322; }
  .s6-titulo { top: 9.1528%;  left: 11.9355%; width: 75.9677%; }
  .s6-tx     { top: 22.9955%; left: 5.0%;     width: 90.1613%; }
  .s6-ticket { top: 46.9743%; left: 0;        width: 100%; }
  .s6-cta    { top: 84.4175%; left: 11.2903%; width: 77.5806%; }

  /* ---------- SEÇÃO 7 — FAQ (empilhado, ícone menor no topo) ---------- */
  .s7-inner { flex-direction: column; gap: 32px; padding: 0 24px; }
  .s7-icon { position: static; width: 140px; flex-basis: auto; margin: 0 auto; }
  .s7-heading { text-align: center; font-size: clamp(34px, 9vw, 48px); }
  .faq-question { font-size: clamp(19px, 5vw, 24px); }
}