/* ==========================================================================
   Landing Disney + Universal — Cia. Lazer
   Layout extraído dos PSDs (1920px de largura de referência).
   Desktop: posicionamento proporcional em % + tipografia em cqw (fiel ao PSD).
   Abaixo de 1024px: tudo vira fluxo vertical.
   ========================================================================== */

:root{
  --verde:      #9DFF07;
  --verde-esc:  #105825;
  --roxo:       #5E15B7;
  --roxo-btn:   #8119D6;
  --navy:       #002F48;
  --navy-pill:  #112A3E;
  --escuro:     #0E2637;
  --escuro-2:   #081F2C;
  --azul-nota:  #4699D8;
}

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

html{ scroll-behavior:smooth; overflow-x:hidden }

body{
  margin:0 auto;
  max-width:1920px;
  background:#fff;
  color:#fff;
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block }
a{ color:inherit }
b,strong{ font-weight:800 }

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

/* ---------- seções ---------- */
.sec{
  position:relative;
  container-type:inline-size;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center top;
}
.sec--hero     { aspect-ratio:1920/921;  background-image:url(../assets/bg/pt1-hero.jpg);      background-color:#01344C }
.sec--branco1  { aspect-ratio:1920/1472; background-color:#fff }
/* z-index 2: as 4 fotos redondas avançam sobre a seção seguinte, como no PSD */
.sec--sessao1  { aspect-ratio:1920/1249; background-image:url(../assets/bg/pt1-sessao1.jpg);   background-color:#142F49; z-index:2 }
.sec--sessao2  { aspect-ratio:1920/1465; background-image:url(../assets/bg/pt1-sessao2.jpg);   background-color:#09212B }
.sec--branco2  { aspect-ratio:1920/269;  background-color:#fff }
.sec--sessao3  { aspect-ratio:1920/603;  background-image:url(../assets/bg/pt1-sessao3.jpg);   background-color:var(--roxo) }
.sec--branco3  { aspect-ratio:1920/268;  background-color:#fff }
.sec--disney   { aspect-ratio:1920/1483; background-image:url(../assets/bg/pt2-disney.jpg);    background-color:#173C57 }
.sec--universal{ aspect-ratio:1920/2039; background-image:url(../assets/bg/pt2-universal.jpg); background-color:#042029 }
.sec--branco4  { aspect-ratio:1920/268;  background-color:#fff }
.sec--motivos  { aspect-ratio:1920/886;  background-color:var(--roxo) }
.sec--vagas    { aspect-ratio:1920/361;  background-image:url(../assets/bg/pt2-vagas.jpg);     background-color:#0D2537 }
.sec--branco5  { aspect-ratio:1920/141;  background-color:#fff; overflow:visible; z-index:2 }
.sec--rodape   { aspect-ratio:1920/508;  background-image:url(../assets/bg/pt2-rodape.jpg);    background-color:var(--escuro) }

/* evita o fio de 1px entre seções (arredondamento sub-pixel do aspect-ratio) */
.sec + .sec{ margin-top:-1px }

/* posicionamento proporcional vindo do PSD */
.abs{ position:absolute; left:var(--l); top:var(--t); width:var(--w); margin:0 }
.deco{ pointer-events:none; user-select:none }
.flip{ transform:scaleX(-1) }

.verde { color:var(--verde) }
.branco{ color:#fff }

/* ---------- botões ---------- */
.btn{
  display:grid; place-items:center; text-align:center;
  aspect-ratio:482/64; border-radius:999px;
  font-size:1.490cqw; font-weight:800; line-height:1.1;
  text-decoration:none; padding:0 1cqw; white-space:nowrap;
  transition:transform .18s ease, filter .18s ease;
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.08) }
.btn--roxo  { background:var(--roxo-btn);  color:var(--verde) }
.btn--escuro{ background:var(--verde-esc); color:var(--verde) }
.btn--verde { background:var(--verde);     color:var(--verde-esc) }

/* ---------- faixas / pílulas ---------- */
.faixa{
  display:grid; place-items:center; text-align:center;
  aspect-ratio:1012/197; border-radius:999px;
  /* céu estrelado recortado do PSD — uma arte por faixa, 1012x197 (1:1 em 1920) */
  background:var(--navy) center/100% 100% no-repeat; color:#fff;
  font-size:1.729cqw; font-weight:800; line-height:1.2; padding:0 3cqw;
}
.sec--branco1 .faixa{ background-image:url(../assets/faixa-1.png) }
.sec--branco2 .faixa{ background-image:url(../assets/faixa-2.png) }
.sec--branco3 .faixa{ background-image:url(../assets/faixa-3.png) }
.sec--branco4 .faixa{ background-image:url(../assets/faixa-4.png) }
.pilula{
  display:grid; place-items:center; text-align:center;
  aspect-ratio:519/64; border-radius:999px;
  background:var(--navy-pill); color:var(--verde);
  border:.25cqw solid var(--verde);
  font-size:1.490cqw; font-weight:400; line-height:1.1; padding:0 2cqw;
}
.pilula b{ font-weight:800 }
/* .t agrupa o texto num único item de grid (senão cada trecho vira uma linha) */
.faixa .t, .pilula .t, .caixa .t, .nota .t{ display:block }
.divisor{ aspect-ratio:395/33; border-radius:999px; background:var(--navy) }

/* ---------- vídeo ---------- */
.video{ aspect-ratio:1122/632; background:#000; display:grid; place-items:center; overflow:hidden }
.video iframe{ width:100%; height:100%; border:0 }
.video__play{
  width:0; height:0; padding:0; border:0; cursor:pointer; background:none;
  border-top:3.85cqw solid transparent;
  border-bottom:3.85cqw solid transparent;
  border-left:6.67cqw solid #fff;
  transition:opacity .18s ease;
}
.video__play:hover{ opacity:.75 }

/* ---------- formulário ---------- */
.form__row{ display:grid; grid-template-columns:22.375% 76.375%; gap:1.25%; margin-bottom:.833cqw }
.form label{
  display:grid; place-items:center; border-radius:999px;
  background:var(--verde); color:var(--verde-esc);
  font-size:1.250cqw; font-weight:800;
}
.form input{
  height:3.333cqw; border:.1cqw solid #7FA88C; border-radius:999px; background:#fff;
  padding:0 2cqw; font-family:inherit; font-size:1.250cqw; color:var(--escuro);
  min-width:0;
}
.form input:focus-visible{ outline:.15cqw solid var(--verde); outline-offset:.15cqw }
.form__acao{ display:flex; justify-content:flex-end; margin-top:.833cqw }
.form button{
  width:22.375%; height:3.333cqw; border:0; border-radius:999px; cursor:pointer;
  background:var(--verde-esc); color:var(--verde);
  font-family:inherit; font-size:1.250cqw; font-weight:800;
  transition:filter .18s ease;
}
.form button:hover{ filter:brightness(1.25) }
.form button[disabled]{ opacity:.6; cursor:progress }
.form input[aria-invalid=true]{ border-color:#B0202A }

/* honeypot: fora da tela, mas não display:none (bot ignora o que está escondido assim) */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

.form__nojs{ margin:.6cqw 0 0; font-size:1cqw; font-weight:600; color:#B0202A }
.form .cf-turnstile:not(:empty){ margin:.6cqw 0 }

/* ---------- modal de retorno do formulário ---------- */
/* O retorno vai para um modal e não para baixo do form: no desktop sobram só
   ~35px até o divisor, e qualquer mensagem em fluxo empurraria o layout. */
.modal[hidden]{ display:none }
.modal{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px }
.modal__fundo{ position:absolute; inset:0; background:rgba(4,20,30,.72); backdrop-filter:blur(3px) }
.modal__caixa{
  position:relative; width:min(440px,100%); padding:36px 32px 28px; text-align:center;
  background:var(--navy); color:#fff; border-radius:28px;
  border:2px solid var(--verde); box-shadow:0 24px 60px rgba(0,0,0,.45);
  animation:modalEntra .22s ease-out;
}
.modal__titulo{ margin:0 0 10px; font-size:22px; font-weight:800; line-height:1.2; color:var(--verde) }
.modal--erro .modal__titulo{ color:#FF6B74 }
.modal__texto{ margin:0 0 24px; font-size:16px; font-weight:400; line-height:1.45 }
.modal__ok{
  min-width:150px; padding:13px 26px; border:0; border-radius:999px; cursor:pointer;
  background:var(--verde); color:var(--verde-esc);
  font-family:inherit; font-size:16px; font-weight:800;
  transition:filter .18s ease;
}
.modal__ok:hover{ filter:brightness(1.08) }
.modal__ok:focus-visible{ outline:3px solid #fff; outline-offset:3px }
@keyframes modalEntra{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .modal__caixa{ animation:none } }

/* ---------- seção 1: embarque ---------- */
.titulo{ font-size:2.083cqw; font-weight:800; line-height:1.08; color:#fff }
.intro { font-size:1.302cqw; font-weight:800; line-height:1.25; color:var(--verde) }

.boxes{ list-style:none; padding:0; display:flex }
.boxes li{ flex:1; text-align:center; display:flex; flex-direction:column; align-items:center }
.boxes img{ height:6.6cqw; width:auto; margin-bottom:.8cqw }
.boxes h3{ font-size:1.625cqw; font-weight:800; line-height:1.05; margin:0 0 .5cqw; max-width:95% }
.boxes p { font-size:1.438cqw; font-weight:400; line-height:1.15; margin:0; max-width:92% }
.boxes p b{ color:var(--verde) }
.boxes .peq{ font-size:1.078cqw; line-height:1.25 }
.boxes .peq b{ color:var(--verde) }

.fotos{ list-style:none; padding:0; margin:0; display:flex; justify-content:space-between }
.fotos li{ width:23.375% }

/* ---------- seção 2: CVXP ---------- */
.vip{ list-style:none; padding:0; margin:0 }
.vip li{ display:grid; grid-template-columns:3.177cqw 1fr; gap:2.031cqw; align-items:center; margin-bottom:1.1cqw }
.vip img{ width:100%; margin-top:.35cqw }
/* último item: no PSD o ícone é o círculo de 109px, não a estrela de 61px da coluna */
/* max-width:none: o global img{max-width:100%} limitaria à largura da coluna do grid */
.vip li:last-child img{ width:5.677cqw; max-width:none; margin-left:-1.667cqw; margin-top:.833cqw }
.vip p{ margin:0; font-size:1.078cqw; font-weight:600; line-height:1.25 }
.vip b{ display:inline-block; font-size:1.438cqw; font-weight:800; color:var(--verde); line-height:1.15 }
.vip .peq{ font-size:1.078cqw; font-weight:400; line-height:1.3 }
.nota{
  display:grid; place-items:center; aspect-ratio:468/64; border-radius:999px;
  background:var(--escuro-2); color:var(--azul-nota); font-size:1.078cqw; font-weight:400; text-align:center;
  border:.1cqw solid var(--azul-nota);
}
/* no PSD o asterisco é branco e maior que o resto da frase */
.nota .ast{ color:#FFEDED; font-size:1.436cqw }

/* ---------- parques ---------- */
.parques{ list-style:none; padding:0; margin:0; display:flex }
.parques li{ flex:1; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.6cqw }
.parques img{ width:56.1% }
.parques span{ font-size:1.599cqw; font-weight:800; line-height:1.05 }
.parques--invertido img{ width:55.1% }   /* legenda acima do círculo (ordem já vem do HTML) */
.parques--dupla img{ width:58.3% }

/* ---------- card Epic Universe ---------- */
.epic{
  aspect-ratio:1016/450;
  /* WebP com alfa: a borda branca e o brilho externo do card já vêm da arte do
     PSD, e a transparência deixa o brilho compor com o fundo da seção.
     Sem border, sem border-radius e sem background-color de propósito —
     qualquer um dos três reintroduz a borda dupla ou o vazamento nas quinas. */
  background:url(../assets/epic-card.webp) center/cover no-repeat;
  display:flex; align-items:center;
}
.epic__txt{ width:38%; padding:0 0 0 11%; }
.epic h3{ font-size:1.599cqw; font-weight:800; margin:0 0 .6cqw }
.epic p { font-size:.938cqw;  font-weight:800; line-height:1.3; margin:0 }

/* ---------- 7 motivos ---------- */
.motivos{ list-style:none; padding:0; margin:0; display:flex }
.motivos li{ flex:1; text-align:center; display:flex; flex-direction:column; align-items:center }
.motivos img{ height:7.3cqw; width:auto; margin-bottom:.6cqw }
.motivos p{ margin:0; max-width:78%; font-size:1.042cqw; font-weight:400; line-height:1.2 }
.motivos b{ display:inline-block; font-size:1.359cqw; font-weight:800; color:var(--verde); line-height:1.1 }

/* ---------- vagas ---------- */
.caixa{
  display:grid; place-items:center; text-align:center;
  aspect-ratio:717/142; border-radius:999px; border:.13cqw solid #fff;
  font-size:1.953cqw; font-weight:800; line-height:1.15;
}
.parcelamento{ text-align:center; font-size:1.953cqw; font-weight:800; line-height:1.15 }

/* ---------- redes + rodapé ---------- */
.redes{ list-style:none; padding:0; margin:0; display:flex; justify-content:space-between }
.redes li{ width:39.7% }
.redes a{ display:block; transition:transform .18s ease }
.redes a:hover{ transform:scale(1.07) }

.endereco{
  font-style:normal; text-align:center;
  font-size:.797cqw; font-weight:400; line-height:1.45; color:#fff;
}
.endereco b{ color:var(--verde) }
.endereco a{ text-decoration:none }
.endereco a:hover{ text-decoration:underline }

/* ---------- botão flutuante do WhatsApp ---------- */
.flutuante{
  position:fixed; right:2vw; bottom:2vw; z-index:50; width:64px; display:none;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.35));
  transition:transform .18s ease;
}
.flutuante:hover{ transform:scale(1.08) }

/* ==========================================================================
   TABLET / MOBILE — tudo vira fluxo vertical
   ========================================================================== */
@media (max-width:1023px){

  .sec{
    aspect-ratio:auto !important;
    background-position:center;
    padding:56px 20px;
    display:flex; flex-direction:column; align-items:center;
  }
  .abs{
    position:static; left:auto; top:auto;
    width:100% !important; max-width:520px; margin:0 auto 28px;
  }
  .abs:last-child{ margin-bottom:0 }
  .deco{ display:none }

  /* fundos com foto pedem contraste extra */
  .sec--sessao1, .sec--sessao2, .sec--disney, .sec--universal{ position:relative }
  .sec--sessao1::before, .sec--sessao2::before,
  .sec--disney::before,  .sec--universal::before{
    content:""; position:absolute; inset:0; background:rgba(4,24,36,.55); pointer-events:none;
  }
  .sec > *{ position:relative; z-index:1 }

  .btn{ aspect-ratio:auto; padding:16px 24px; font-size:17px; max-width:400px; white-space:normal }
  .faixa{ aspect-ratio:auto; padding:24px 22px; font-size:19px; border-radius:28px }
  .pilula{ aspect-ratio:auto; padding:14px 20px; font-size:17px; max-width:420px; border-width:2px }
  .divisor{ aspect-ratio:auto; height:10px; max-width:220px }

  /* hero */
  .sec--hero{ padding:40px 20px 56px; min-height:82vw; justify-content:center;
              background-position:58% center }
  .logo{ max-width:160px }
  .sec--hero .whats{ display:none }   /* no mobile fica o botão flutuante */
  .sec--hero .logo{ order:-1; max-width:150px; margin-bottom:24px }
  .sec--sessao3{ background-position:58% center; padding:44px 20px }
  .sec--hero .arte{ max-width:min(92%,460px); margin-bottom:32px }

  /* vídeo + formulário */
  .video{ max-width:600px; width:100% !important }
  .video__play{ border-top-width:22px; border-bottom-width:22px; border-left-width:38px }
  .form{ max-width:520px }
  .form__row{ grid-template-columns:1fr; gap:6px; margin-bottom:14px }
  .form label{ justify-items:start; place-items:center start; background:none;
               color:var(--verde-esc); font-size:14px; padding-left:14px }
  .form input{ height:48px; font-size:16px; border:1px solid #7FA88C }
  .form__acao{ justify-content:stretch; margin-top:6px }
  .form button{ width:100%; height:52px; font-size:16px }
  .form__nojs{ font-size:14px }
  .form .cf-turnstile:not(:empty){ margin:12px 0 }
  .modal__caixa{ padding:30px 22px 24px; border-radius:24px }
  .modal__titulo{ font-size:19px }
  .modal__texto{ font-size:15px }

  /* seção 1 */
  .titulo{ font-size:28px; text-align:center }
  .intro { font-size:17px; text-align:center }
  .boxes{ flex-direction:column; gap:36px; max-width:420px }
  .boxes img{ height:74px; margin-bottom:12px }
  .boxes h3{ font-size:22px; margin-bottom:8px; max-width:100% }
  .boxes p{ font-size:17px; max-width:100% }
  .boxes .peq{ font-size:15px }
  .fotos{ flex-wrap:wrap; justify-content:center; gap:18px; max-width:420px }
  .fotos li{ width:calc(50% - 9px) }

  /* CVXP */
  .cvxp{ max-width:270px }
  .vip{ max-width:460px }
  .vip li{ grid-template-columns:26px 1fr; gap:12px; margin-bottom:20px }
  .vip img{ margin-top:4px }
  .vip li:last-child img{ width:46px; max-width:none; margin-left:-14px; margin-top:0 }
  .vip p{ font-size:15px }
  .vip b{ font-size:19px }
  .vip .peq{ font-size:14px }
  .nota{ aspect-ratio:auto; padding:12px 18px; font-size:14px; max-width:420px }
  .nota .ast{ font-size:19px }
  /* a arte da faixa tem as pontas arredondadas embutidas; esticá-la numa caixa
     mais alta deforma as bordas — no mobile fica o navy chapado */
  .faixa{ background-image:none !important }

  /* parques */
  .parques{ flex-wrap:wrap; justify-content:center; gap:26px 18px; max-width:460px }
  .parques li{ flex:0 0 calc(50% - 9px); gap:10px }
  .parques img, .parques--invertido img{ width:72%; margin:0 auto }
  .parques span{ font-size:17px }

  /* Epic */
  /* no mobile o card estica: a janela visível cai no miolo opaco da arte
     (78%/128%), então a borda e o arredondamento aqui são do CSS */
  .epic{ aspect-ratio:auto; border-radius:28px; overflow:hidden;
         background-color:#10293A;
         background-position:78% center; background-size:auto 128%;
         border:1px solid rgba(255,255,255,.85);
         min-height:340px; align-items:flex-end; padding:24px }
  .epic::before{ content:""; position:absolute; inset:0; border-radius:26px;
                 background:linear-gradient(180deg,rgba(9,26,38,.35),rgba(9,26,38,.92)) }
  .epic__txt{ width:100%; padding:0; position:relative }
  .epic h3{ font-size:22px; margin-bottom:10px }
  .epic p{ font-size:14px }

  /* motivos */
  .motivos{ flex-wrap:wrap; justify-content:center; gap:34px 20px; max-width:460px }
  .motivos li{ flex:0 0 calc(50% - 10px) }
  .motivos img{ height:78px; margin-bottom:10px }
  .motivos p{ max-width:100%; font-size:14px }
  .motivos b{ font-size:17px }

  /* vagas / rodapé */
  .caixa{ aspect-ratio:auto; padding:20px; font-size:24px; border-radius:28px; max-width:440px }
  .parcelamento{ font-size:24px }
  .sec--branco5{ padding:34px 20px }
  .redes{ justify-content:center; gap:22px; max-width:220px }
  .redes li{ width:64px }
  .sec--rodape{ padding:44px 20px 40px }
  .endereco{ font-size:13px; max-width:420px }
  .sec--rodape .logo{ max-width:120px; margin-bottom:0 }

  .flutuante{ display:block; width:56px }
}

@media (max-width:520px){
  .sec{ padding:44px 16px }
  .titulo{ font-size:24px }
  .faixa{ font-size:17px }
  .parques li{ flex:0 0 calc(50% - 9px) }
  .motivos li{ flex:0 0 100% }
  .fotos li{ width:calc(50% - 9px) }
}

/* ==========================================================================
   ACIMA DE 1920px (2K, ultrawide) — o conteúdo continua num container Full HD
   e as laterais recebem uma extensão ambiente da arte de cada seção.
   ========================================================================== */
@media (min-width:1921px){
  .sec::before, .sec::after{
    content:""; position:absolute; top:0; bottom:0;
    width:calc((100vw - 100%)/2 + 1px);
    background-color:inherit;          /* seções de cor chapada se resolvem sozinhas */
    background-size:100% 100%;
    background-repeat:no-repeat;
    pointer-events:none;
  }
  .sec::before{ right:100% }
  .sec::after { left:100% }

  .sec--hero::before     { background-image:url(../assets/bg/pt1-hero-esq.jpg) }
  .sec--hero::after      { background-image:url(../assets/bg/pt1-hero-dir.jpg) }
  .sec--sessao1::before  { background-image:url(../assets/bg/pt1-sessao1-esq.jpg) }
  .sec--sessao1::after   { background-image:url(../assets/bg/pt1-sessao1-dir.jpg) }
  .sec--sessao2::before  { background-image:url(../assets/bg/pt1-sessao2-esq.jpg) }
  .sec--sessao2::after   { background-image:url(../assets/bg/pt1-sessao2-dir.jpg) }
  .sec--sessao3::before  { background-image:url(../assets/bg/pt1-sessao3-esq.jpg) }
  .sec--sessao3::after   { background-image:url(../assets/bg/pt1-sessao3-dir.jpg) }
  .sec--disney::before   { background-image:url(../assets/bg/pt2-disney-esq.jpg) }
  .sec--disney::after    { background-image:url(../assets/bg/pt2-disney-dir.jpg) }
  .sec--universal::before{ background-image:url(../assets/bg/pt2-universal-esq.jpg) }
  .sec--universal::after { background-image:url(../assets/bg/pt2-universal-dir.jpg) }
  .sec--vagas::before    { background-image:url(../assets/bg/pt2-vagas-esq.jpg) }
  .sec--vagas::after     { background-image:url(../assets/bg/pt2-vagas-dir.jpg) }
  .sec--rodape::before   { background-image:url(../assets/bg/pt2-rodape-esq.jpg) }
  .sec--rodape::after    { background-image:url(../assets/bg/pt2-rodape-dir.jpg) }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *{ transition:none !important }
}