/* ==========================================================================
   Kabine — Componentes
   Todos leem apenas tokens semânticos (--surface, --text, --accent…), por
   isso funcionam sem alteração dentro de .theme-light, .theme-dark ou
   .theme-brand.
   ========================================================================== */

/* ---------------------------------------------------------------- BOTÕES */

.btn {
  --btn-py: 14px;
  --btn-px: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--btn-py) var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 17px;
  /* 500, o mesmo peso do display-xl do hero. A 700 o botão ficava mais pesado
     que o próprio h1 acima dele, que anda em 500 — o CTA gritava mais alto que
     a manchete. */
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent-fill);
  color: var(--on-accent);
}
.btn--primary:hover { background: var(--accent-hover); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--ghost-border);
}
.btn--ghost:hover { background: var(--ghost-hover); border-color: var(--border-strong); }

.btn--sm { --btn-py: 10px; --btn-px: 18px; font-size: var(--fs-sm); }
/* 19px, e não 18: no bloco vermelho chapado o botão fantasma é texto branco
   direto sobre #FE0100, e só a partir de 18,66px/700 ele conta como texto
   grande (3:1 exigido) em vez de texto normal (4,5:1). */
.btn--lg { --btn-py: 17px; --btn-px: 34px; font-size: 19px; }
.btn--block { width: 100%; }

.btn .chev { transition: transform var(--dur) var(--ease); }
.btn:hover .chev { transform: translateX(3px); }

/* Link com seta, para "ver todos" e afins. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
}
.link-arrow .chev { transition: transform var(--dur) var(--ease); }
.link-arrow:hover .chev { transform: translateX(3px); }

/* ------------------------------------------------------------ PILL / BADGE */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-muted);
}

.pill--accent {
  background: var(--accent-fill);
  border-color: transparent;
  color: var(--on-accent);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: 11px;
}

.pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-fill);
  flex: none;
}

/* ------------------------------------------------------------------ CARD */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.card--flush { padding: 0; overflow: hidden; }
.card--pop { box-shadow: var(--shadow-card); }

.card--accent {
  border-color: var(--accent-fill);
  box-shadow: 0 0 0 1px var(--accent-fill);
}

/* ------------------------------------------------------------------ ÍCONE */

.icon {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--accent);
}
.icon svg { width: 22px; height: 22px; }

.icon--sm { width: 36px; height: 36px; border-radius: var(--r-sm); }
.icon--sm svg { width: 18px; height: 18px; }

/* --------------------------------------------------- SLOT DE PRINT (shot)
   Aponta para o arquivo definitivo em img/screens/. Enquanto o arquivo não
   existir, main.js marca .is-empty e o bloco neutro aparece no lugar. */

.shot {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.shot > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.shot--16x10 { aspect-ratio: 16 / 10; }
.shot--16x9  { aspect-ratio: 16 / 9; }
.shot--4x3   { aspect-ratio: 4 / 3; }
.shot--3x4   { aspect-ratio: 3 / 4; }
.shot--9x16  { aspect-ratio: 9 / 16; }

.shot__pending { display: none; }

.shot.is-empty > img { display: none; }

.shot.is-empty {
  border-style: dashed;
  border-color: var(--border-strong);
}

.shot.is-empty .shot__pending {
  display: grid;
  place-content: center;
  gap: var(--sp-2);
  justify-items: center;
  text-align: center;
  position: absolute;
  inset: 0;
  padding: var(--sp-5);
  color: var(--text-faint);
}

.shot__pending code {
  font-family: var(--font-data);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.shot__pending span {
  font-size: var(--fs-caption);
  max-width: 34ch;
}

/* Moldura de navegador em volta do print principal. */
.frame {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}

.frame__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.frame__dots { display: flex; gap: 6px; }
.frame__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }

.frame__url {
  flex: 1;
  max-width: 280px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--bg);
  border: 1px solid var(--border);
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--text-faint);
  text-align: center;
}

.frame .shot { border: 0; border-radius: 0; }

/* --------------------------------------------------------------- NAVBAR
   Dois estados, como na referência:
   topo   — barra larga (1152px), sem fundo, sem borda, sem raio, sem blur;
   rolado — encolhe para 896px e vira pílula de raio 24 com fundo translúcido
            e blur(40px). A altura não muda; quem "reduz" é a largura.

   Como o hero é grafite, no estado transparente o logo e os links precisam
   inverter para branco — a referência não tem esse problema porque o hero
   dela é claro. */

.nav-wrap {
  position: fixed;
  inset-inline: 0;
  top: var(--nav-top);
  z-index: var(--z-nav);
  pointer-events: none;
}

.nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
  max-width: var(--nav-w-open);
  height: var(--nav-h);
  margin-inline: auto;
  padding-inline: var(--nav-px-open);
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  transition:
    max-width      300ms var(--ease-out),
    padding-inline 300ms var(--ease-out),
    border-radius  300ms var(--ease-out),
    border-color   300ms var(--ease-out),
    background-color 300ms var(--ease-out),
    backdrop-filter  300ms var(--ease-out);
}

.nav.is-stuck {
  max-width: var(--nav-w-stuck);
  padding-inline: var(--nav-px-stuck);
  border-radius: var(--nav-radius);
  border-color: var(--nav-border);
  background: var(--nav-bg);
  backdrop-filter: var(--nav-blur);
  -webkit-backdrop-filter: var(--nav-blur);
}

/* A página alterna seções claras e escuras, e a pílula é translucida: sobre o
   grafite ela virava uma lâmina cinza com o logo e os links ilegiveis. Quando
   a barra está sobre uma seção escura, ela inverte o próprio tema. */
.nav.is-stuck.is-over-dark {
  background: rgb(20 23 26 / .6);
  border-color: rgb(255 255 255 / .14);
}

.nav.is-stuck.is-over-dark .nav__links a { color: rgb(255 255 255 / .85); }
.nav.is-stuck.is-over-dark .nav__links a:hover { background: rgb(255 255 255 / .12); color: #fff; }
.nav.is-stuck.is-over-dark .nav__burger { border-color: rgb(255 255 255 / .3); color: #fff; }
.nav.is-stuck.is-over-dark .nav__brand .is-light { opacity: 1; }
.nav.is-stuck.is-over-dark .nav__brand .is-dark  { opacity: 0; }

/* Marca: os dois logos empilhados, com crossfade entre os estados. */
.nav__brand {
  position: relative;
  flex: none;
  width: 116px;   /* 26px de altura na proporção 1742:392 do lockup */
  height: 26px;
}

.nav__brand img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 300ms var(--ease-out);
}

.nav__brand .is-light { opacity: 1; }
.nav__brand .is-dark  { opacity: 0; }
.nav.is-stuck .nav__brand .is-light { opacity: 0; }
.nav.is-stuck .nav__brand .is-dark  { opacity: 1; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-inline: auto;
}

.nav__links a {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-body);
  font-weight: 500;
  color: rgb(255 255 255 / .85);
  transition: background-color var(--dur) var(--ease), color 300ms var(--ease-out);
}

.nav__links a:hover { background: rgb(255 255 255 / .12); color: #fff; }

.nav.is-stuck .nav__links a { color: var(--ink-700); }
.nav.is-stuck .nav__links a:hover { background: var(--ink-50); color: var(--ink-950); }

.nav__actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }

.nav__signin {
  padding: 8px 14px;
  font-size: var(--fs-body);
  font-weight: 600;
  color: rgb(255 255 255 / .85);
  border-radius: var(--r-pill);
  transition: background-color var(--dur) var(--ease), color 300ms var(--ease-out);
}

.nav__signin:hover { color: #fff; background: rgb(255 255 255 / .12); }

/* Some ao rolar, como o "Login" da referência. display:none em vez de
   opacidade porque um link invisível mas focável vira armadilha de teclado. */
.nav.is-stuck .nav__signin { display: none; }

.nav__burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / .3);
  border-radius: var(--r-pill);
  background: transparent;
  cursor: pointer;
  color: #fff;
  transition: border-color 300ms var(--ease-out), color 300ms var(--ease-out);
}

.nav.is-stuck .nav__burger { border-color: var(--ink-200); color: var(--ink-950); }

.nav__drawer { display: none; }

@media (max-width: 1024px) {
  .nav { padding-inline: var(--sp-5); }
  .nav.is-stuck { padding-inline: var(--sp-4); }

  .nav__links { display: none; }
  .nav__signin { display: none; }
  .nav__burger { display: inline-flex; }

  .nav__drawer {
    display: block;
    position: absolute;
    inset-inline: var(--gutter);
    top: calc(100% + var(--sp-2));
    padding: var(--sp-5);
    border-radius: var(--r-xl);
    background: var(--paper);
    border: 1px solid var(--ink-100);
    box-shadow: var(--shadow-pop);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  }

  .nav-wrap.is-open .nav__drawer {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav__drawer a {
    display: block;
    padding: var(--sp-3) var(--sp-2);
    text-align: center;
    font-family: var(--font-display);
    font-size: var(--fs-lead);
    font-weight: 600;
    color: var(--ink-950);
    border-bottom: 1px solid var(--ink-100);
  }

  .nav__drawer a:last-child { border-bottom: 0; padding-bottom: 0; }
}

@media (max-width: 480px) {
  .nav__actions .btn { --btn-px: 18px; font-size: var(--fs-sm); }
  .nav__brand { width: 100px; height: 22px; }
}

/* ------------------------------------------------------------------- FAQ */

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: var(--tr-h4);
  color: var(--text);
}

.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item > summary .sign {
  flex: none;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--accent);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.faq-item[open] > summary .sign { transform: rotate(45deg); background: var(--surface-2); }

.faq-item__body {
  padding-bottom: var(--sp-5);
  color: var(--text-muted);
  max-width: var(--container-prose);
}

/* ------------------------------------------------ TOGGLE MENSAL / ANUAL */

.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
}

.switch input { position: absolute; opacity: 0; pointer-events: none; }

.switch__track {
  position: relative;
  width: 54px; height: 30px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

.switch__track::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent-fill);
  transition: transform var(--dur) var(--ease);
}

.switch input:checked + .switch__track::after { transform: translateX(24px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--accent-fill); outline-offset: 3px; }

.switch__label { cursor: pointer; }
.switch__label.is-on { color: var(--text); }

/* ------------------------------------------------------------- FORMULÁRIO */

.form { display: flex; flex-direction: column; gap: var(--sp-4); }
/* display:flex venceria o [hidden] do navegador — sem esta linha o formulário
   continua na tela depois do envio, com a confirmação logo abaixo dele. */
.form[hidden] { display: none; }

.form__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  font-weight: 500;
  letter-spacing: var(--tr-display-m);
  line-height: var(--lh-display-m);
  color: var(--text);
}

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 420px) { .form__row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.field label {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}

.field input {
  width: 100%;
  padding: 13px 15px;
  font: inherit;
  font-size: 16px;            /* abaixo de 16px o Safari do iPhone dá zoom ao focar */
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.field input::placeholder { color: var(--text-faint); }

.field input:hover { border-color: var(--text-faint); }

.field input:focus-visible {
  outline: none;
  border-color: var(--accent-fill);
  box-shadow: 0 0 0 3px rgb(254 1 0 / .16);
}

.field.is-invalid input { border-color: var(--accent-fill); }

.field__msg { font-size: var(--fs-sm); color: var(--accent); }

/* Fora da tela em vez de display:none — campo escondido por display não é
   enviado por alguns robôs, e a isca precisa ser preenchível. */
.form__trap {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%);
}

.form__error {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--surface-2);
  border-left: 3px solid var(--accent-fill);
  border-radius: var(--r-sm);
}
.form__error[hidden] { display: none; }
.form__error a { color: var(--accent); font-weight: 600; text-decoration: underline; }

.form button[type="submit"] { margin-top: var(--sp-2); }
.form button[disabled] { opacity: .65; cursor: progress; }

.form__note { font-size: var(--fs-sm); color: var(--text-muted); text-align: center; }

/* Confirmação: ocupa o lugar do formulário no mesmo cartão, sem trocar de
   página nem mexer na altura do bloco de forma brusca. */
.form__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-6);
  text-align: center;
}
.form__done[hidden] { display: none; }
.form__done:focus-visible { outline: none; }

.form__done-mark {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--r-pill);
  color: var(--on-accent);
  background: var(--accent-fill);
}

.form__done h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: var(--tr-h4);
  color: var(--text);
}

.form__done p { color: var(--text-muted); max-width: 32ch; }

/* ------------------------------------------------------------- WHATSAPP
   Botão flutuante de contato, fixo no canto inferior direito.

   Verde do WhatsApp e não o vermelho da marca de propósito: o vermelho já é
   do "Começar agora", e um segundo botão vermelho permanente na tela criaria
   duas ações primárias disputando. O verde diz "canal de conversa" sem tirar
   peso do CTA.

   Abaixo de --z-menu para o drawer do mobile passar por cima, e a sombra é
   legítima aqui porque este é um dos poucos elementos que de fato flutuam. */
.wa {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  /* Respira acima da barra de gestos do iOS, que come o canto de baixo. */
  bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-nav);

  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-pill);
  background: #25D366;
  color: #fff;
  box-shadow:
    0 2px 6px rgb(11 13 15 / .16),
    0 12px 28px -8px rgb(11 13 15 / .32);
  transition:
    background-color var(--dur) var(--ease),
    transform        var(--dur) var(--ease),
    box-shadow       var(--dur) var(--ease);
}

.wa svg { width: 28px; height: 28px; }

.wa:hover {
  background: #1EBE5A;
  transform: translateY(-2px);
  box-shadow:
    0 2px 6px rgb(11 13 15 / .18),
    0 18px 36px -10px rgb(11 13 15 / .38);
}

.wa:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgb(37 211 102 / .45);
}

@media (max-width: 640px) {
  .wa { width: 52px; height: 52px; }
  .wa svg { width: 26px; height: 26px; }
}

/* Em tela larga o botão cai na margem fora do container e não encosta em
   nada. A partir do ponto em que essa margem fica menor que o botão mais o
   gutter — 1200 de container + 2x(56 + 32) —, ele passa a cobrir os ícones
   sociais do rodapé. Quem abre espaço é o rodapé: o botão não sai do canto,
   que é onde o usuário espera achá-lo. */
@media (max-width: 1376px) {
  .footer { padding-bottom: calc(var(--sp-7) + 56px); }
}