/* LP Grupo VIP — Roberta Cardoso. Medidas tiradas do Figma Qiz9Fm7Votkl9SvgcUDXmK
   (celular 22:5 = 390 de largura, computador 5:4 = 1440×900). O palco inteiro escala por --z. */

:root {
  --ardosia: #3b416a;
  --marinho: #262a48;
  --marinho-2: #22264a;
  --rosa: #ed72a8;
  --creme: #fdf2d0;
  --cinza: #6b7090;
  --z: 1;
  --barlow: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --jakarta: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; background: var(--ardosia); overflow-x: clip; }
body { color: #fff; font-family: var(--jakarta); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { display: block; }
p, h1, h2, ol { margin: 0; padding: 0; }
b { font-weight: 800; color: var(--creme); }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- palco: celular primeiro (390) ---------- */

.lp { overflow: hidden; }
.palco { position: relative; width: 390px; margin: 0 auto; zoom: var(--z); }
.so-d { display: none !important; }

.arte { position: absolute; inset: 0; pointer-events: none; }
.arte > * { position: absolute; }
.arte-frente { z-index: 3; }

.estrela-m { left: 9.07px; top: 45.12px; width: 371.9px; height: 354.87px; }
.orbita-m { left: 0; top: 0; width: 390px; height: 460px; }

.card { left: var(--x); top: var(--y); width: 96px; height: 118px; }
.card-in {
  width: 100%; height: 100%; padding: 5px; background: #fff; border-radius: 7px;
  box-shadow: 0 10px 22px -4px rgba(13, 15, 41, .45);
  transform: rotate(var(--r)); animation: flutua var(--t, 6s) ease-in-out infinite alternate; animation-delay: var(--f, 0s);
}
.card-in img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.card-italia { --x: 15.74px; --y: 100.33px; --r: 8deg; }
.card-bebe   { --x: 273.28px; --y: 21.41px; --r: -7deg; --f: -2s; --t: 7s; }
.card-premio { --x: 280.09px; --y: 198.66px; --r: 6deg; --f: -4s; --t: 6.5s; }
.card-tablet { --x: 13.9px;  --y: 226.01px; --r: -6deg; --f: -5.5s; --t: 7.5s; }
/* flutua e balança de leve em volta da inclinação de cada cartão (rotate soma ao transform) */
@keyframes flutua {
  from { translate: 0 -3px; rotate: -2.2deg; }
  to   { translate: 0 4px;  rotate: 2.2deg; }
}

.pino { width: 10px; height: 10px; background: url(../img/pino-m.svg) center / 100% 100% no-repeat; left: var(--x); top: var(--y); }
.p1 { --x: 62.44px;  --y: 94.91px; }
.p2 { --x: 23.43px;  --y: 222.93px; }
.p3 { --x: 348.63px; --y: 131.58px; }
.p4 { --x: 265.47px; --y: 48.62px; }
.p5 { --x: 366.69px; --y: 198.62px; }
.p6 { --x: 335.77px; --y: 314.1px; }
.p7 { --x: 76.13px;  --y: 337.2px; }
.p8 { --x: 25.89px;  --y: 223.4px; }

.roberta { left: 40px; top: 46px; width: 330px; height: 496px; }
.roberta img { width: 100%; height: 100%; object-fit: cover; }
.dissolve {
  left: 0; top: 250px; width: 390px; height: 302px;
  background: linear-gradient(180deg, rgba(59, 65, 106, 0) 0%, rgba(59, 65, 106, .55) 22.219%, #3b416a 40.397%, #3b416a 100%);
}

.col { position: relative; z-index: 2; width: 326px; margin-left: 32px; padding-top: 376px; }

.pre { font: 300 21.2px/1 var(--barlow); white-space: nowrap; }
/* celular (quadro 29:10): título numa linha só, "sobrar." em creme, sem etiqueta */
.titulo { margin-top: 3.8px; font: 600 34.1px/1 var(--barlow); color: var(--rosa); letter-spacing: .5115px; white-space: nowrap; }
.titulo .linha, .etiqueta { display: inline-block; }
.leve { font-weight: 300; color: #fff; }
.forte { font-weight: 600; }
.etiqueta { color: var(--creme); }
.etiqueta .rosa { color: var(--rosa); }
.sub { margin-top: 21.9px; font: 500 16px/1.5 var(--jakarta); }

.cta {
  display: flex; align-items: center; justify-content: center; width: 326px; height: 62px;
  background: var(--rosa); border-radius: 14px; color: #fff;
  font: 800 17px/normal var(--jakarta); letter-spacing: .51px; white-space: nowrap;
  box-shadow: 0 12px 14px rgba(237, 114, 168, .35);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 16px 22px rgba(237, 114, 168, .45); background-color: #f07fb1; }
.cta:active { transform: translateY(0); }
.cta:focus-visible { outline: 3px solid var(--creme); outline-offset: 3px; }
.cta-topo { margin-top: 36px; }

/* seção 2 no celular: marinho entrando por uma curva com linha tracejada */
.descobrir { position: relative; width: 390px; margin: 43.82px 0 0 -32px; padding: 149.6px 32px 65px; }
.forma { position: absolute; left: 0; right: 0; top: -16px; bottom: 0; overflow: hidden; pointer-events: none; }
.forma > * { position: absolute; }
.forma-curva { left: -1px; top: .63px; width: 392px; height: 795.39px; }
.estrela-divisa { left: 256.05px; top: 53.83px; width: 280px; height: 280px; transform: rotate(-12deg); }
.estrela-divisa img { position: absolute; left: 20.64px; top: 15.12px; width: 238.75px; height: 228.24px; }
.pino-divisa { left: 157.5px; top: 50.5px; width: 10px; height: 10px; }
.estrela-secao2 { left: 241.12px; top: 601.12px; width: 257.77px; height: 246.33px; }
.descobrir > :not(.forma) { position: relative; }

.descobrir h2 { font: 700 25px/1 var(--barlow); color: var(--creme); text-transform: uppercase; letter-spacing: .16px; white-space: nowrap; }
.descobrir h2 .leve { color: var(--creme); }
.itens { list-style: none; display: grid; row-gap: 24px; margin-top: 28px; }
.itens li { display: grid; grid-template-columns: 46px 280px; align-items: start; }
.num { font: 600 30px/1 var(--barlow); color: var(--rosa); margin-top: -2px; }
.itens p { font: 600 15px/22px var(--jakarta); }
.convite { display: flex; align-items: flex-start; gap: 10px; margin-top: 32px; font: 700 15px/22px var(--jakarta); color: var(--creme); }
.convite > span:last-child { width: 296px; }
.presente { flex: none; width: 20px; height: 20px; margin-top: 1px; background: url(../img/presente-m.svg) center / 100% 100% no-repeat; }
.descobrir .cta { margin-top: 32px; }
.nota { margin-top: 14px; font: 500 12px/normal var(--jakarta); color: rgba(255, 255, 255, .65); text-align: center; white-space: nowrap; }

/* ---------- computador: uma dobra 1440×900 ---------- */

@media (min-width: 1024px) {
  .so-m { display: none !important; }
  .so-d { display: block !important; }

  .lp { display: grid; place-items: center; min-height: 100vh; min-height: 100svh; }
  .palco { width: 1440px; height: 900px; margin: 0; }

  .estrela-esq { left: -430.7px; top: 682.65px; width: 681.48px; height: 649.89px; }
  .estrela-dir { left: 740.75px; top: 62.63px; width: 738.54px; height: 704.16px; }
  .orbita { left: -70px; top: 0; width: 1451.93px; height: 900px; }

  .card { width: 176px; height: 216px; }
  .card-in { padding: 8px; border-radius: 10px; box-shadow: 0 18px 36px -6px rgba(13, 15, 41, .45); }
  .card-in img { border-radius: 4px; }
  .card-italia { --x: 744.17px; --y: 145.75px; }
  .card-bebe   { --x: 1157.49px; --y: 45.92px; }
  .card-premio { --x: 1159.2px; --y: 447.18px; }
  .card-tablet { --x: 757.07px; --y: 543.01px; }

  .pino { width: 14px; height: 14px; background-image: url(../img/pino.svg); }
  .p1 { --x: 877.67px;  --y: 144.5px; }
  .p2 { --x: 757.95px;  --y: 375.66px; }
  .p3 { --x: 1327.48px; --y: 246.28px; }
  .p4 { --x: 1145.33px; --y: 97.31px; }
  .p5 { --x: 1322.41px; --y: 600.03px; }
  .p6 { --x: 1271.37px; --y: 661.97px; }
  .p7 { --x: 934.83px;  --y: 710.09px; }
  .p8 { --x: 767.8px;   --y: 508.79px; }

  /* a foto passa da dobra no Figma (vai até 961); corta em 900 */
  .roberta { left: 746px; top: 104px; width: 570px; height: 796px; overflow: hidden; }
  .roberta img { height: 857px; }
  .dissolve { left: 690px; top: 701.69px; width: 700px; height: 220px; background: linear-gradient(180deg, rgba(59, 65, 106, 0), #3b416a); }

  .col { position: absolute; left: 120px; top: 113px; width: 600px; margin: 0; padding: 0; }
  .pre { font-size: 31.9px; }
  .titulo { margin-top: 0; font-size: 72.6px; font-weight: 700; letter-spacing: 1.089px; white-space: normal; }
  .titulo .linha { display: block; margin-top: 4.1px; white-space: nowrap; }
  /* sem a etiqueta do Figma (pedido dele): "sobrar." em creme na linha de baixo, mesmo corpo */
  .etiqueta { display: block; width: max-content; font-weight: 600; }
  .sub { margin-top: 26.66px; width: 540px; font-size: 17px; }

  .descobrir { width: auto; margin: 28px 0 0; padding: 0; }
  .descobrir h2 { font-size: 27px; }
  .itens { grid-template-columns: 300px 300px; row-gap: 15px; margin-top: 14px; }
  .itens li { grid-template-columns: 40px 250px; }
  .num { font-size: 31px; margin-top: -5px; }
  .itens p { font-size: 14px; line-height: 20px; }
  .convite { align-items: center; gap: 8px; margin-top: 19.5px; line-height: normal; }
  .convite > span:last-child { width: auto; white-space: nowrap; }
  .presente { width: 22px; height: 22px; margin-top: 0; background-image: url(../img/presente.svg); }
  .descobrir .cta { margin-top: 20.5px; }
  .cta { width: 440px; height: 68px; color: var(--marinho); font-size: 18px; letter-spacing: .54px; }
  .nota { width: 440px; margin-top: 12px; font-size: 13.5px; }
}

/* ---------- popup do formulário ---------- */

.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal-fundo { position: absolute; inset: 0; background: rgba(20, 23, 43, .72); opacity: 0; transition: opacity .3s ease; }
.modal-caixa {
  position: relative; width: 358px; padding: 52px 20px 26px; background: #fff; border-radius: 24px;
  box-shadow: 0 30px 70px -10px rgba(8, 10, 31, .5); zoom: min(var(--z), 1.6);
  opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.modal.aberto .modal-fundo { opacity: 1; }
.modal.aberto .modal-caixa { opacity: 1; transform: none; }
.fechar { position: absolute; top: 18px; right: 18px; width: 20px; height: 20px; border-radius: 6px; }
.fechar:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; }
#form-vip { display: flex; flex-direction: column; gap: 14px; }
.campo { display: block; }
.campo input {
  width: 100%; height: 58px; padding: 0 18px 0 22px; background: #f3f4f8; border: 1px solid #d9dce8; border-radius: 14px;
  font: 500 17px/normal var(--jakarta); color: var(--marinho); outline: none; transition: border-color .2s, box-shadow .2s, background-color .2s;
  -webkit-appearance: none; appearance: none;
}
.campo input::placeholder { color: var(--cinza); opacity: 1; }
.campo input:focus { border-color: var(--rosa); background: #fff; box-shadow: 0 0 0 3px rgba(237, 114, 168, .18); }
.campo input.invalido { border-color: #d6456f; }
.erro { margin: -4px 0 -6px; font: 600 13px/1.4 var(--jakarta); color: #c63a68; }
.cta-form { width: 100%; height: 60px; margin-top: 4px; color: var(--marinho); font-size: 16.5px; letter-spacing: .495px; }
.cta-form[disabled] { opacity: .75; cursor: progress; transform: none; }
.aviso { display: flex; align-items: center; justify-content: center; gap: 8px; font: 500 11.5px/normal var(--jakarta); color: var(--cinza); }
.aviso span { flex: 1; text-align: center; }
html.travado, html.travado body { overflow: hidden; }

@media (min-width: 1024px) {
  .modal-caixa { width: 528px; padding: 56px 44px 36px; border-radius: 28px; }
  .fechar { top: 20px; right: 20px; }
  .campo input { height: 64px; }
  .cta-form { height: 68px; font-size: 18px; letter-spacing: .54px; }
  .aviso { font-size: 14px; }
  .aviso span { flex: none; }
}

/* ---------- entradas (a classe que esconde só existe com JS) ---------- */

.anim .e { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }
.anim .e.on { opacity: 1; transform: none; }
.anim .e-card { transform: translateY(26px) scale(.86); }
.anim .e-pino { transform: scale(0); transition-timing-function: ease, cubic-bezier(.3, 1.6, .5, 1); }
.anim .e-foto { transform: translateY(30px); transition-duration: .9s, 1.1s; }
.anim .e-giro { transform: rotate(-14deg) scale(.9); transition-duration: 1s, 1.4s; }
.anim .estrela-divisa.e-giro { transform: rotate(-26deg) scale(.9); }
.anim .estrela-divisa.e-giro.on { transform: rotate(-12deg); }
.anim .e-orbita { transform: none; clip-path: circle(0% at 62% 48%); transition: opacity .6s ease, clip-path 1.6s cubic-bezier(.4, 0, .2, 1); transition-delay: var(--d, 0s); }
.anim .e-orbita.on { clip-path: circle(80% at 62% 48%); }

/* "reduzir movimento" só suaviza: entra com fade, sem deslizar */
@media (prefers-reduced-motion: reduce) {
  .anim .e, .anim .e.on, .anim .e-card, .anim .e-pino, .anim .e-foto, .anim .e-giro { transform: none; }
  .anim .estrela-divisa.e-giro, .anim .estrela-divisa.e-giro.on { transform: rotate(-12deg); }
  .anim .e-orbita { clip-path: none; }
  .card-in { animation-duration: 12s; }
}

/* ---------- página de obrigado (/grupovip/obrigado): sem foto, só estrelas e o texto no centro ---------- */

.lp-obrigado .palco { min-height: calc(100vh / var(--z)); min-height: calc(100svh / var(--z)); display: flex; align-items: center; }
.lp-obrigado .estrela-m { left: 170px; top: auto; bottom: -175px; }
.col-obrigado { display: flex; flex-direction: column; align-items: center; width: 326px; padding: 48px 0; text-align: center; }
.passos { display: flex; gap: 8px; margin-bottom: 18px; }
.passos span { width: 44px; height: 6px; border-radius: 3px; }
.passos .feito { background: var(--creme); }
.passos .agora { background: var(--rosa); animation: pulsa 1.4s ease-in-out infinite alternate; }
@keyframes pulsa { from { opacity: .4; } to { opacity: 1; } }
.titulo-obrigado { margin-top: 0; font-size: 50px; letter-spacing: .75px; }
.lp-obrigado .sub { margin-top: 18px; font-size: 17px; }
.cta-obrigado { margin-top: 32px; text-decoration: none; }

@media (min-width: 1024px) {
  .lp-obrigado .palco { min-height: 0; display: block; }
  .lp-obrigado .estrela-dir { left: 1010px; }
  .col-obrigado { left: 0; top: 0; width: 1440px; height: 900px; padding: 0; justify-content: center; }
  .passos { margin-bottom: 22px; }
  .passos span { width: 56px; }
  .titulo-obrigado { font-size: 72.6px; letter-spacing: 1.089px; }
  .lp-obrigado .sub { margin-top: 24px; width: 560px; font-size: 20px; }
  .cta-obrigado { margin-top: 40px; }
}