/* Tokens (único lugar com cores) e peças comuns às duas páginas. */

/* Fonte local (recorte latin), variável: um arquivo serve os pesos de 400 a 700. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/figtree-var.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;
}


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

:root {
  /* Razões de contraste medidas (WCAG). */
  --areia:        #F3F1F2;   /* fundo                              */
  --folha:        #FCFBFC;   /* papel sobre o fundo                */
  --escuro:       #2A1D28;   /* fundo de #planos                   */

  --tinta:        #211A1F;   /* texto sobre o fundo      15.16:1   */
  --tinta-2:      #5A4F57;   /* secundário sobre o fundo  6.94:1   */
  --giz:          #F3E9EF;   /* texto sobre escuro       13.57:1   */
  --giz-2:        #C3AFBC;   /* secundário sobre escuro   7.80:1   */

  --sienna:       #8A2D63;   /* accent sobre o fundo      7.08:1   */
  --sienna-claro: #EFA3CC;   /* accent sobre escuro       8.26:1   */
  --sienna-fundo: #F1E1EA;
  --sienna-escuro:#6B2049;   /* hover; --folha sobre ele 10.55:1   */

  /* --fio é decorativo; --traco é borda de input e foco e precisa de 3:1. */
  --fio:          #D6D1D4;
  --fio-escuro:   #4A3846;
  --traco:        #7C737A;   /* sobre o fundo             4.07:1   */
  --traco-escuro: #8E7A89;   /* sobre escuro              4.06:1   */

  --erro:         #A12C22;   /*                           6.44:1   */
  --ok:           #2F6B3A;   /*                           5.68:1   */

  --ff-display: 'Figtree', system-ui, -apple-system, sans-serif;
  --ff-texto:   'Figtree', system-ui, -apple-system, sans-serif;

  /* Escala única: título do hero, título de seção, subtítulo, texto, nota. */
  --t-hero:  clamp(2.25rem, 4.6vw, 4.25rem);
  --t-sec:   2.25rem;
  --t-sub:   1.375rem;
  --t-base:  1.0625rem;
  --t-nota:  .875rem;

  --lh-justo:  1.08;
  --lh-titulo: 1.18;
  --lh-meio:   1.45;
  --lh-texto:  1.65;

  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 24px;
  --s6: 32px;  --s7: 48px;  --s8: 64px;

  --btn-pad: var(--s3) var(--s5);

  /* Também lida pelo engine.js. O nav fixo mede 1px a mais (a borda). */
  --nav-h: 72px;

  /* Respiro vertical das seções. */
  --r-secao: clamp(var(--s8), 10svh, 120px);

  --raio: 0;
  --transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

html { -webkit-text-size-adjust: 100%; }
/* Suave só depois de um clique: ao abrir com #hash, a animação miraria a
   posição de antes das fontes carregarem e pararia sob o nav. */
html:focus-within { scroll-behavior: smooth; }
body {
  font-family: var(--ff-texto);
  background: var(--areia);
  color: var(--tinta-2);
  -webkit-font-smoothing: antialiased;
  font-size: var(--t-base);
  line-height: var(--lh-texto);
}
img { display: block; max-width: 100%; height: auto; }
a   { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { font-family: var(--ff-texto); }

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

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 28px;
}

.display {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--t-sec);
  line-height: var(--lh-titulo);
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--tinta);
}

.btn {
  display: inline-flex; align-items: center; gap: var(--s3);
  background: var(--sienna);
  color: var(--folha); font-family: var(--ff-texto); font-weight: 600;
  font-size: var(--t-base); padding: var(--btn-pad); border-radius: var(--raio);
  border: 1px solid var(--sienna); justify-content: center; text-align: center; min-height: 48px; cursor: pointer; transition: var(--transition);
  text-decoration: none;
}
.btn:hover { background: var(--sienna-escuro); border-color: var(--sienna-escuro); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: var(--s3);
  background: transparent; color: var(--tinta);
  font-family: var(--ff-texto); font-weight: 600; font-size: var(--t-base);
  padding: var(--btn-pad); justify-content: center; text-align: center; min-height: 48px; border-radius: var(--raio);
  border: 1px solid var(--traco);
  cursor: pointer; transition: var(--transition); text-decoration: none;
}
.btn-ghost:hover { border-color: var(--sienna); color: var(--sienna); }

.link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--tinta); font-weight: 600;
  text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px;
  text-decoration-color: var(--traco); transition: var(--transition);
}
.link:hover { color: var(--sienna); text-decoration-color: currentColor; }

.nota { font-size: var(--t-nota); line-height: var(--lh-meio); color: var(--tinta-2); }

/* Condição do plano, na home e no resumo do checkout. */
.plano-items li, .resumo-itens li { font-size:var(--t-nota); line-height:var(--lh-meio); padding-block:var(--s1); }

:focus-visible {
  outline: 2px solid var(--traco);
  outline-offset: 3px;
}

/* Tema escuro: redefine os tokens, e tudo dentro herda. */
.escuro {
  background: var(--escuro);
  color: var(--giz-2);

  --folha:          var(--escuro);   /* texto sobre botão de accent */
  --tinta:          var(--giz);
  --tinta-2:        var(--giz-2);
  --fio:            var(--fio-escuro);
  --traco:          var(--traco-escuro);
  --sienna:         var(--sienna-claro);
  --sienna-escuro:  #F7C9E1;   /* hover: --escuro sobre ele 11.03:1 */
}

.demo-aviso {
  background:var(--sienna); color:var(--folha);
  font-size:var(--t-nota); line-height:var(--lh-meio);
  padding: var(--s2) var(--s4); text-align:center; text-wrap:balance;
}
.demo-aviso a { color:inherit; text-decoration:underline; text-underline-offset:2px; }

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