/* ==========================================================================
   Junior Achievement SC — "Level Up!" landing page
   Reconstruída 1:1 a partir de "landing page.psd" (prancheta 1080 × 1920 px).
   Todas as medidas abaixo são as coordenadas reais das camadas do PSD.
   ========================================================================== */

/* --- Tipografia (Montserrat, a mesma fonte usada no PSD) ------------------
   Servida localmente: sem dependência de terceiros e sem troca de fonte
   durante o carregamento. Arquivo variável — cobre os pesos 700 e 800.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens extraídos do PSD ---------------------------------------------- */
:root {
  /* Unidade de escala: 1u == 1px do PSD.
     A prancheta inteira cabe na viewport, sem cortes e sem rolagem.
     O teto de 1.2px evita ampliar o material acima da resolução original. */
  --u: min(calc(100vw / 1080), calc(100svh / 1920), 1.2px);

  --teal-card:   rgb(59 208 210);      /* Retângulo 1  */
  --teal-deep:   #0f4c4e;              /* Retângulo 3  */
  --ink:         #154e50;              /* cor do título */
  --placeholder: #d8d7d7;              /* textos-modelo dos campos */
  --white:       #ffffff;

  --radius-card:  calc(16 * var(--u)); /* raio do Retângulo 1 */
  --radius-cta:   calc(24 * var(--u)); /* raio do Retângulo 3 */
  --radius-input: calc(12 * var(--u)); /* metade do raio do botão */

  --ease: cubic-bezier(.2, .8, .25, 1);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: #06282a;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
}

img { display: block; }

/* --- Fundo de preenchimento para telas largas ----------------------------- */
.backdrop {
  position: fixed;
  left: -4%;
  top: -4%;
  width: 108%;
  height: 108%;
  background: #06282a url("assets/bg-blur.webp") center / cover no-repeat;
  filter: blur(28px) saturate(.7) brightness(.42);
  z-index: 0;
}

/* ==========================================================================
   PRANCHETA
   ========================================================================== */
.stage {
  position: relative;
  z-index: 1;
  width:  calc(1080 * var(--u));
  height: calc(1920 * var(--u));
  isolation: isolate;
  box-shadow: 0 calc(12 * var(--u)) calc(60 * var(--u)) rgb(0 0 0 / .55);
}

/* --- Fundo animado -------------------------------------------------------
   O GIF de referência tem só 3 quadros distintos (3 poses do garoto), cada um
   exibido por 200 ms — um ciclo de 600 ms repetido em laço. Reproduzimos isso
   com 3 imagens sobrepostas e corte seco, em vez de carregar um GIF de 13 MB.
   -------------------------------------------------------------------------- */
.stage__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.stage__still,
.stage__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stage__still { z-index: 0; }          /* base nítida, vinda do PSD */

.stage__frame {
  z-index: 1;
  opacity: 0;
  animation: bg-flip 600ms linear infinite;
}

.stage__frame--0 { animation-delay: 0ms; }
.stage__frame--1 { animation-delay: 200ms; }
.stage__frame--2 { animation-delay: 400ms; }

@keyframes bg-flip {
  0%,      33.32% { opacity: 1; }
  33.33%, 100%    { opacity: 0; }
}

/* Sem animação: fica só a pose do PSD, na qualidade máxima. */
@media (prefers-reduced-motion: reduce) {
  .stage__frame { display: none; }
}

/* --- Logo JA Santa Catarina — camada em (92, 112), 158 × 177 -------------- */
.logo {
  position: absolute;
  left:   calc(92  * var(--u));
  top:    calc(112 * var(--u));
  width:  calc(158 * var(--u));
  height: calc(177 * var(--u));
  z-index: 3;
}

/* --- Adesivo "Level Up!" — camada em (290, 520), 506 × 328 ---------------- */
.sticker {
  position: absolute;
  left:   calc(290 * var(--u));
  top:    calc(520 * var(--u));
  width:  calc(506 * var(--u));
  height: calc(328 * var(--u));
  z-index: 3;
  animation: sticker-in .7s var(--ease) both;
}

@keyframes sticker-in {
  from { opacity: 0; transform: translateY(calc(-14 * var(--u))) rotate(-2deg) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   CARTÃO DO FORMULÁRIO — Retângulo 1: (217, 815) → (902, 1774)
   ========================================================================== */
.card {
  position: absolute;
  /* No PSD o cartão fica em x=217, com margens de 217/178 — deslocado 19,5 px
     para a direita. Aqui ele é centralizado: (1080 - 685) / 2. */
  left:   calc(197.5 * var(--u));
  top:    calc(815 * var(--u));
  width:  calc(685 * var(--u));
  /* 959 no PSD; ajustada para a chamada no topo, o consentimento e o botão menor */
  height: calc(900 * var(--u));
  z-index: 2;

  /* opacidade 230/255 no PSD; a foto aparece discretamente por baixo */
  background: rgb(59 208 210 / .95);
  border-radius: var(--radius-card);
}

/* --- Título — camada de texto em (271, 875), Montserrat ExtraBold 32,4 ---- */
.card__title {
  position: absolute;
  top:   calc(76 * var(--u));
  left:  0;
  right: 0;
  margin: 0;
  font-size: calc(32.4 * var(--u));
  font-weight: 800;
  line-height: 1;
  letter-spacing: .05em;
  text-align: center;
  color: var(--ink);
  text-indent: .05em;               /* compensa o tracking à direita */
}

/* --- Campos ---------------------------------------------------------------
   Cada campo é uma sobreposição do tamanho do cartão; rótulo, caixa e
   mensagem de erro são posicionados nas coordenadas exatas do PSD.
   --label-y / --input-y são relativos ao topo do cartão (y 815 do PSD).
   -------------------------------------------------------------------------- */
.field {
  position: absolute;
  inset: 0;
  pointer-events: none;             /* não bloqueia o que está por baixo */
}

/* No PSD cada rótulo e cada texto-modelo foi posicionado à mão (x = 56/60/60 e
   recuos de 26/24/18). Aqui todos partilham o mesmo eixo do campo. */
.field--nome  { --label-y: 134.4; --input-y: 174; }
.field--email { --label-y: 305.4; --input-y: 347; }
.field--tel   { --label-y: 478.4; --input-y: 521; }

.field { --label-x: 50; --pad: 24; }   /* alinhados à borda esquerda do campo */

.field > * { pointer-events: auto; }

.field__label {
  position: absolute;
  top:  calc(var(--label-y) * var(--u));
  left: calc(var(--label-x) * var(--u));
  margin: 0;
  font-size: calc(22.4 * var(--u));
  font-weight: 800;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--white);
  cursor: pointer;
  white-space: nowrap;
}

.field__input {
  position: absolute;
  top:  calc(var(--input-y) * var(--u));
  left: calc(50 * var(--u));        /* (685 - 585) / 2 — centralizado no cartão */
  width:  calc(585 * var(--u));
  height: calc(77  * var(--u));
  padding: 0 calc(24 * var(--u)) 0 calc(var(--pad) * var(--u));
  border: 0;
  border-radius: var(--radius-input);
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: calc(22.4 * var(--u));
  font-weight: 800;
  letter-spacing: .05em;
  outline: 0;
  appearance: none;
  transition: box-shadow .22s var(--ease), background-color .22s var(--ease);
}

.field__input::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

.field__input:focus-visible {
  box-shadow:
    0 0 0 calc(3 * var(--u)) var(--teal-deep),
    0 calc(4 * var(--u)) calc(16 * var(--u)) rgb(3 40 42 / .3);
}

/* Estado de erro */
.field.is-invalid .field__input {
  background: #fff3f3;
  box-shadow: 0 0 0 calc(3 * var(--u)) #b3261e;
}

/* Vermelho escuro em vez de branco: sobre o teal do cartão o branco rende
   apenas 1,8:1 de contraste (era o que a sombra tentava disfarçar); este tom
   rende 6:1, acima do mínimo AA, e dispensa sombra. */
.field__error {
  position: absolute;
  left: calc(var(--label-x) * var(--u));
  top:  calc((var(--input-y) + 93) * var(--u));   /* 16 px de respiro do campo */
  margin: 0;
  max-height: 0;
  overflow: hidden;
  font-size: calc(18 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  color: #6e1512;
  opacity: 0;
  transition: opacity .2s var(--ease), max-height .2s var(--ease);
}

.field.is-invalid .field__error {
  max-height: calc(48 * var(--u));
  opacity: 1;
}

/* --- Consentimento LGPD --------------------------------------------------- */
.consent {
  position: absolute;
  top:  calc(648 * var(--u));
  left: calc(50 * var(--u));
  right: calc(50 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
}

.consent__box {
  flex: none;
  width:  calc(28 * var(--u));
  height: calc(28 * var(--u));
  margin: 0;
  border: calc(3 * var(--u)) solid var(--white);
  border-radius: calc(6 * var(--u));
  background: transparent;
  cursor: pointer;
  appearance: none;
  display: grid;
  place-items: center;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}

.consent__box::after {
  content: "";
  width:  calc(14 * var(--u));
  height: calc(8 * var(--u));
  border-left:   calc(4 * var(--u)) solid var(--teal-deep);
  border-bottom: calc(4 * var(--u)) solid var(--teal-deep);
  transform: rotate(-45deg) translate(calc(1 * var(--u)), calc(-2 * var(--u)));
  opacity: 0;
  transition: opacity .15s var(--ease);
}

.consent__box:checked            { background: var(--white); }
.consent__box:checked::after     { opacity: 1; }
.consent__box:focus-visible      { outline: calc(3 * var(--u)) solid var(--teal-deep);
                                   outline-offset: calc(2 * var(--u)); }

.consent__label {
  font-size: calc(18 * var(--u));
  font-weight: 700;
  line-height: 1.25;
  color: var(--white);
  cursor: pointer;
}

.consent__link {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: calc(3 * var(--u));
}

.consent__link:hover { color: var(--ink); }

/* Sem espaço para uma linha de erro aqui: o próprio bloco muda de cor e a
   mensagem aparece no rodapé do cartão. */
.consent.is-invalid .consent__label { color: #6e1512; }
.consent.is-invalid .consent__link  { color: #6e1512; }
.consent.is-invalid .consent__box   { border-color: #6e1512; background: #fff3f3; }

/* Campo-isca: escondido sem usar display:none, que alguns robôs detectam. */
.isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Chamada — agora no topo, servindo de apoio ao título -----------------
   y=36 não é arbitrário: o adesivo tem pixel opaco até y=847 da prancheta e
   é desenhado por cima do cartão, então abaixo disso a chamada seria cortada. */
.card__caption {
  position: absolute;
  top:   calc(36 * var(--u));
  left:  0;
  right: 0;
  margin: 0;
  font-size: calc(22.4 * var(--u));
  font-weight: 800;
  line-height: 1;
  letter-spacing: .05em;
  text-align: center;
  color: var(--white);
  text-indent: .05em;
}

/* --- Botão — Retângulo 3: (276, 1541) → (849, 1722), 573 × 181 ------------ */
.cta {
  position: absolute;
  top:    calc(706 * var(--u));
  left:   calc(56  * var(--u));     /* (685 - 573) / 2 — centralizado no cartão */
  width:  calc(573 * var(--u));
  height: calc(150 * var(--u));     /* 181 no PSD */
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-cta);
  background: var(--teal-deep);
  color: var(--white);
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              box-shadow .18s var(--ease);
}

.cta__label {
  font-size: calc(64 * var(--u));   /* 75,8 no PSD */
  font-weight: 800;
  line-height: 1;
  letter-spacing: .05em;
  text-indent: .05em;
  transform: translateY(calc(1 * var(--u)));   /* alinhamento óptico vertical */
}

.cta:hover  { background: #12595c; transform: translateY(calc(-3 * var(--u))); }
.cta:active { background: #0c4042; transform: translateY(calc(1 * var(--u))); }

.cta:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 calc(4 * var(--u)) #fff, 0 0 0 calc(8 * var(--u)) var(--teal-deep);
}

.cta[disabled] { opacity: .6; cursor: progress; transform: none; }

/* --- Mensagem de retorno --------------------------------------------------- */
.form-status {
  position: absolute;
  left: calc(56 * var(--u));
  right: calc(56 * var(--u));
  top: calc(862 * var(--u));
  margin: 0;
  font-size: calc(19 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--white);
  opacity: 0;
  transition: opacity .25s var(--ease);
}

.form-status.is-visible { opacity: 1; }

/* ==========================================================================
   ESTADO DE SUCESSO — o cartão vira o comprovante de download
   ========================================================================== */
.card.is-sent > *:not(.success) {
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s var(--ease);
}

.success {
  position: absolute;
  inset: calc(56 * var(--u));
  display: grid;
  align-content: center;
  justify-items: center;
  gap: calc(26 * var(--u));
  text-align: center;
  color: var(--white);
  animation: success-in .45s var(--ease) both .18s;
}

@keyframes success-in {
  from { opacity: 0; transform: translateY(calc(18 * var(--u))); }
  to   { opacity: 1; transform: none; }
}

.success__check {
  width:  calc(132 * var(--u));
  height: calc(132 * var(--u));
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--teal-deep);
  font-size: calc(70 * var(--u));
  line-height: 1;
}

.success__title {
  margin: 0;
  font-size: calc(46 * var(--u));
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .04em;
  color: var(--ink);
}

.success__text {
  margin: 0;
  max-width: calc(500 * var(--u));
  font-size: calc(23 * var(--u));
  font-weight: 700;
  line-height: 1.45;
}

.success__link {
  margin-top: calc(8 * var(--u));
  padding: calc(26 * var(--u)) calc(54 * var(--u));
  border-radius: var(--radius-cta);
  background: var(--teal-deep);
  color: var(--white);
  font-size: calc(30 * var(--u));
  font-weight: 800;
  letter-spacing: .05em;
  text-decoration: none;
  transition: transform .18s var(--ease), background-color .18s var(--ease);
}

.success__link:hover { background: #12595c; transform: translateY(calc(-3 * var(--u))); }

/* ==========================================================================
   Acessibilidade
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (prefers-contrast: more) {
  .card { background: var(--teal-card); }
}