/* =========================================================
   YUP — Lista de acesso antecipado
   Design tokens
   ========================================================= */
:root{
  /* Cores da marca */
  --navy:        #272D4F;
  --navy-deep:   #1B2039;
  --navy-soft:   #3A4270;
  --cream:       #F7F3E8;
  --cream-deep:  #EFE9D9;
  --white:       #FFFFFF;
  --coral:       #D4502E;
  --coral-deep:  #B23E20;

  /* Tokens semânticos */
  --bg-primary:    var(--cream);
  --bg-secondary:  var(--cream-deep);
  --bg-elevated:   var(--white);
  --bg-inverse:    var(--navy);

  --text-primary:   var(--navy);
  --text-secondary: #565C7E;
  --text-muted:     #7C819B;
  --text-inverse:   var(--cream);

  --accent-primary: var(--coral);
  --accent-hover:   var(--coral-deep);

  --border-subtle: #E2DCCB;
  --border-strong: #C9C2AE;

  /* Tipografia */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Espaçamento — sistema 8pt */
  --s-1: 4px;  --s-2: 8px;  --s-3: 16px; --s-4: 24px;
  --s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: 96px;

  /* Raios */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-full: 999px;

  /* Sombras */
  --sh-1: 0 1px 2px rgba(39,45,79,.06);
  --sh-2: 0 8px 24px -12px rgba(39,45,79,.22);
  --sh-3: 0 24px 60px -28px rgba(39,45,79,.38);

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur: 240ms;
}

/* =========================================================
   Reset
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg-primary);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
h1,h2,h3,p,figure,fieldset,legend{ margin:0; }
fieldset{ border:0; padding:0; min-width:0; }
a{ color:inherit; }
button,input{ font:inherit; color:inherit; }

::selection{ background:var(--navy); color:var(--cream); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--navy); color:var(--cream);
  padding:var(--s-2) var(--s-3); border-radius:0 0 var(--r-sm) 0;
  text-decoration:none;
}
.skip-link:focus{ left:0; }

/* Foco visível global */
:focus-visible{
  outline:3px solid var(--accent-primary);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

/* =========================================================
   Layout
   ========================================================= */
.wrap{
  width:100%;
  max-width:1040px;
  margin-inline:auto;
  padding-inline:var(--s-4);
}
.wrap--narrow{ max-width:660px; }

/* =========================================================
   Barra de marca
   ========================================================= */
.brandbar{
  background:var(--navy);
  padding:var(--s-4) var(--s-4);
}
.brandbar__inner{
  max-width:1040px;
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:var(--s-4);
}
.brandbar__logo{
  height:44px; width:auto;
  filter:brightness(0) invert(1);
  opacity:.96;
}
/* Motivo de barras verticais da identidade */
.brandbar__bars{
  flex:1;
  height:44px;
  min-width:60px;
  background-image:repeating-linear-gradient(
    90deg,
    var(--cream) 0 10px,
    transparent 10px 24px
  );
  background-position:right center;
  mask-image:linear-gradient(90deg, transparent, #000 45%);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 45%);
  opacity:.9;
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  padding:var(--s-6) 0 var(--s-5);
  background:
    radial-gradient(900px 420px at 84% -10%, rgba(212,80,46,.10), transparent 62%),
    var(--bg-primary);
  text-align:left;
}
.eyebrow{
  font-size:.6875rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--accent-primary);
  margin-bottom:var(--s-3);
}
.hero__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.9rem, 6vw, 3rem);
  line-height:1.08;
  letter-spacing:-.02em;
  margin-bottom:var(--s-3);
}
.kite{
  display:inline-block;
  font-size:.62em;
  transform:translateY(-.12em);
  animation:float 4.5s var(--ease) infinite;
}
@keyframes float{
  0%,100%{ transform:translateY(-.12em) rotate(-4deg); }
  50%{ transform:translateY(-.34em) rotate(6deg); }
}
.hero__lead{
  font-size:clamp(.9375rem, 1.9vw, 1.0625rem);
  color:var(--text-secondary);
  max-width:52ch;
  margin-bottom:var(--s-4);
}
.hero__lead strong{ color:var(--text-primary); font-weight:600; }

/* Datas */
.dates{
  list-style:none; margin:0 0 var(--s-4); padding:0;
  display:grid; gap:var(--s-2);
}
@media (min-width:640px){ .dates{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.date{
  background:var(--bg-elevated);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-md);
  padding:var(--s-3);
  box-shadow:var(--sh-1);
}
.date--first{
  background:var(--navy);
  border-color:var(--navy);
  color:var(--text-inverse);
  box-shadow:var(--sh-2);
}
.date__day{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.375rem;
  line-height:1.15;
  letter-spacing:-.01em;
}
.date__label{
  display:block;
  margin-top:2px;
  font-size:.8125rem;
  color:var(--text-secondary);
}
.date--first .date__label{ color:rgba(247,243,232,.78); }
.date__label em{
  display:block;
  font-style:normal;
  font-weight:600;
  color:var(--accent-primary);
}
.date--first .date__label em{ color:#F0A288; }

/* =========================================================
   Botões
   ========================================================= */
.btn{
  --btn-bg:var(--navy);
  --btn-fg:var(--cream);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  min-height:52px;
  padding:0 var(--s-5);
  border:1px solid transparent;
  border-radius:var(--r-full);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-weight:600;
  font-size:1rem;
  text-decoration:none;
  cursor:pointer;
  transition:transform var(--dur) var(--ease),
             background-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); }
.btn:active{ transform:translateY(0); }

.btn--ghost{
  --btn-bg:transparent;
  --btn-fg:var(--navy);
  border-color:var(--navy);
}
.btn--ghost:hover{ --btn-bg:var(--navy); --btn-fg:var(--cream); }

.btn--primary{ width:100%; }
.btn--primary:hover{ --btn-bg:var(--navy-deep); }
.btn[disabled]{ opacity:.65; cursor:progress; transform:none; }

.spinner{
  width:18px; height:18px;
  border:2px solid rgba(247,243,232,.35);
  border-top-color:var(--cream);
  border-radius:50%;
  display:none;
  animation:spin .7s linear infinite;
}
.is-sending .spinner{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* =========================================================
   Formulário
   ========================================================= */
.formsec{ padding:0 0 var(--s-8); }

.card{
  background:var(--bg-elevated);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-3);
  padding:var(--s-5) var(--s-4);
}
@media (min-width:640px){ .card{ padding:var(--s-6) var(--s-6); } }

.form__req{
  font-size:.8125rem;
  color:var(--text-muted);
  margin-bottom:var(--s-5);
}
.req{ color:var(--accent-primary); font-weight:700; }

.field{ margin-bottom:var(--s-6); }
.field:last-of-type{ margin-bottom:var(--s-5); }

.label{
  display:block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.1875rem;
  line-height:1.3;
  letter-spacing:-.005em;
  margin-bottom:var(--s-1);
  padding:0;
}
.help{
  font-size:.875rem;
  color:var(--text-secondary);
  margin-bottom:var(--s-3);
}
.help--legal{ font-size:.8125rem; line-height:1.65; }
.help--legal a{ color:var(--accent-primary); }

.input{
  width:100%;
  min-height:52px;
  padding:var(--s-2) var(--s-3);
  background:var(--white);
  border:1px solid var(--border-strong);
  border-radius:var(--r-sm);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder{ color:#A9AEC2; }
.input:hover{ border-color:var(--navy-soft); }
.input:focus{
  outline:none;
  border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(39,45,79,.14);
}

/* Opções (checkbox / radio) */
.opt{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:var(--s-3);
  min-height:48px;
  padding:var(--s-2) var(--s-3) var(--s-2) var(--s-2);
  margin-bottom:var(--s-2);
  border:1px solid transparent;
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.opt:hover{ background:var(--cream); border-color:var(--border-subtle); }
.opt input{ position:absolute; opacity:0; width:0; height:0; }

.opt__box{
  flex:0 0 auto;
  width:22px; height:22px;
  margin-top:3px;
  border:2px solid var(--border-strong);
  border-radius:6px;
  background:var(--white);
  position:relative;
  transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.opt--radio .opt__box{ border-radius:50%; }

.opt__box::after{
  content:"";
  position:absolute;
  opacity:0;
  transition:opacity 160ms var(--ease), transform 160ms var(--ease);
}
/* check */
.opt:not(.opt--radio) .opt__box::after{
  left:6px; top:2px;
  width:5px; height:10px;
  border:solid var(--cream);
  border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg) scale(.6);
}
/* dot */
.opt--radio .opt__box::after{
  left:50%; top:50%;
  width:10px; height:10px;
  border-radius:50%;
  background:var(--cream);
  transform:translate(-50%,-50%) scale(.4);
}
.opt input:checked + .opt__box{ background:var(--navy); border-color:var(--navy); }
.opt:not(.opt--radio) input:checked + .opt__box::after{ opacity:1; transform:rotate(45deg) scale(1); }
.opt--radio input:checked + .opt__box::after{ opacity:1; transform:translate(-50%,-50%) scale(1); }

.opt input:focus-visible + .opt__box{
  outline:3px solid var(--accent-primary);
  outline-offset:3px;
}
.opt__txt{ padding-top:1px; }

/* Erros */
.error{
  display:none;
  margin-top:var(--s-2);
  font-size:.8125rem;
  font-weight:500;
  color:var(--coral-deep);
}
.field.has-error .error{ display:block; }
.field.has-error .input{
  border-color:var(--coral-deep);
  box-shadow:0 0 0 3px rgba(178,62,32,.12);
}
.field.has-error .opt__box{ border-color:var(--coral-deep); }

.formerror{
  margin-top:var(--s-4);
  padding:var(--s-3);
  background:#FBEDE8;
  border:1px solid #EBC5B7;
  border-radius:var(--r-sm);
  font-size:.875rem;
  color:var(--coral-deep);
}

.form__actions{ margin-top:var(--s-5); }
.form__note{
  margin-top:var(--s-3);
  text-align:center;
  font-size:.8125rem;
  color:var(--text-muted);
}

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* =========================================================
   Sucesso
   ========================================================= */
.success{ text-align:center; }
/* recebe foco por acessibilidade, mas sem desenhar o anel laranja */
.success:focus,
.success:focus-visible{ outline:none; }
.success__kite{
  display:block;
  font-size:3rem;
  margin-bottom:var(--s-3);
  animation:float 4.5s var(--ease) infinite;
}
.success__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.6rem,5vw,2.1rem);
  line-height:1.15;
  letter-spacing:-.02em;
  margin-bottom:var(--s-3);
}
.success__text{ color:var(--text-secondary); max-width:44ch; margin-inline:auto; }
.success__text strong{ color:var(--text-primary); }
.success__small{
  margin-top:var(--s-3);
  font-size:.8125rem;
  color:var(--text-muted);
}

/* CTA do grupo do WhatsApp */
.btn--zap{
  width:100%;
  margin-top:var(--s-5);
}
.btn--zap:hover{ --btn-bg:var(--navy-deep); }
.btn__icon{ flex:0 0 auto; }

/* =========================================================
   Rodapé
   ========================================================= */
.footer{
  background:var(--navy);
  color:var(--text-inverse);
  padding:var(--s-6) 0;
  text-align:center;
}
.footer__logo{
  height:34px; width:auto;
  margin:0 auto var(--s-4);
  filter:brightness(0) invert(1);
  opacity:.92;
}
.footer__line{ font-size:.875rem; }
.footer__line--muted{ color:rgba(247,243,232,.68); margin-top:var(--s-1); }
.footer__line a{ color:var(--cream); text-decoration:underline; text-underline-offset:3px; }

#yup-sink{ display:none; }

/* =========================================================
   Reveal on scroll
   ========================================================= */
.js .reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 600ms var(--ease), transform 600ms var(--ease);
}
.js .reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}