/* ============================================================
   Slyng Academy · estilos da página
   Tokens da marca em /assets/tokens.css (cópia do Slyng Design System).
   Regra: fora do bloco :root abaixo, só var(--token). Sem sombra, sem gradiente.
   ============================================================ */

@import url('/assets/tokens.css');

/* Tokens de layout desta página (derivados da escala do DS) */
:root {
  --page-max: 1200px;
  --gutter: var(--s-4);            /* 16px no celular */
  --gutter-desktop: var(--s-6);

  --header-h: 64px;
  --logo-h: 28px;

  --fs-h1-mobile: 32px;
  --fs-h1-desktop: 44px;
  --track-h1: -2px;
  --track-h1-mobile: var(--track-tight);
  --fs-h3: 24px;
  --fs-h4: 18px;
  --fs-ui: 14px;
  --fs-ui-sm: 13px;
  --fs-caption: 13px;
  --lh-tight: 1.1;
  --lh-ui: 1.4;

  --border-clear: 1px solid transparent;
  --nudge: 2px;
  --focus-ring: 1px solid var(--volt);

  --btn-h: 44px;
  --btn-h-sm: 36px;
  --btn-h-lg: 52px;

  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 40px;
  --avatar: 72px;
  --avatar-sm: 40px;
  --fs-case-num: 56px;
  --track-case-num: -3px;
  --fs-mono-label: 11px;
  --track-mono-label: 0.3px;

  --gate-form-min: 420px;
  --side-col: 400px;
  --cookie-bar-h: 72px;           /* altura máx. da barra de cookies no celular */
  --cookie-bar-h-desktop: 56px;
  --fs-cookie: 11px;
  --lh-cookie: 1.35;
  --btn-h-xs: 26px;
  --cookie-pad-y: 5px;
  --modal-max: 480px;
  --text-max: 640px;

  --z-banner: 40;
  --z-sheet: 50;
  --z-modal: 60;

  --scrim: rgba(10, 10, 10, 0.8);
  --overlay: rgba(10, 10, 10, 0.55);
  --volt-tint: rgba(197, 242, 48, 0.08);
}

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

[hidden] { display: none !important; }

html {
  background: var(--surface-0);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface-0);
  color: var(--fg-2);
}

/* Barra de cookies visível: reserva a altura dela no fim da página */
body:has(#cookie-banner:not([hidden])) { padding-bottom: var(--cookie-bar-h); }

h1, h2, h3, p, ol { margin: 0; }

img, video, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--s-1);
}

.container {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.only-desktop { display: none; }
.only-mobile { display: inline; }

/* ---------- Header ---------- */
.site-header { border-bottom: var(--hairline); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: var(--header-h);
}

.brand,
.brand:hover {
  display: inline-flex;
  align-items: center;
  border-bottom: 0;
  color: var(--fg-1);
}

.brand__logo { height: var(--logo-h); width: auto; }
.brand__mark { color: var(--volt); }
.brand__word {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-display);
  fill: var(--fg-1);
}

.site-header__tag {
  padding-left: var(--s-3);
  border-left: var(--line);
  font-size: var(--fs-ui);
  font-weight: var(--w-medium);
  line-height: var(--lh-ui);
  color: var(--fg-3);
}

/* ---------- Hero ---------- */
.hero { padding: var(--s-6) 0 var(--s-7); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
}

.hero__main { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }

.hero__title {
  font-size: var(--fs-h1-mobile);
  letter-spacing: var(--track-h1-mobile);
  line-height: var(--lh-tight);
}

.hero__sub { color: var(--fg-2); }

.media { margin-top: var(--s-3); }

/* Player bloqueado */
.locked-player,
.player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  overflow: hidden;
}

.locked-player__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.locked-player__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--overlay);
  text-align: center;
}

.locked-player__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-lg);
  height: var(--icon-lg);
  border: var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-0);
  color: var(--volt);
  padding: var(--s-2);
}

.locked-player__caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-ui);
  color: var(--fg-1);
}

/* ---------- Gate ---------- */
.hero__side { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }

.gate,
.offer--card {
  border: var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  padding: var(--s-5);
}

.gate__title,
.offer__title {
  font-size: var(--fs-h3);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-snug);
  line-height: var(--lh-tight);
  color: var(--fg-1);
}

.gate__support {
  margin-top: var(--s-2);
  font-size: var(--fs-ui);
  color: var(--fg-3);
}

.gate__form {
  margin-top: var(--s-5);
  min-height: var(--gate-form-min);
  border-radius: var(--r-card);
}

.gate__iframe { display: block; width: 100%; border: 0; }

/* Painel "Nesta aula" (desktop, do desbloqueio até o CTA) */
.lesson-panel {
  display: none;
  flex-direction: column;
  gap: var(--s-4);
  border: var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  padding: var(--s-5);
}

.lesson-panel__title {
  font-size: var(--fs-h4);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-snug);
  line-height: var(--lh-tight);
  color: var(--fg-1);
}

.lesson-panel__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.lesson-panel__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  color: var(--fg-2);
}

.lesson-panel__check {
  flex-shrink: 0;
  width: var(--icon-sm);
  height: var(--icon-sm);
  margin-top: var(--nudge);
  color: var(--volt);
}

.lesson-panel__teacher {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: var(--hairline);
}

.lesson-panel__avatar {
  flex-shrink: 0;
  width: var(--avatar-sm);
  height: var(--avatar-sm);
  border: var(--line);
  border-radius: var(--r-pill);
  object-fit: cover;
}

.lesson-panel__teacher-text { font-size: var(--fs-ui-sm); line-height: var(--lh-ui); color: var(--fg-3); }
.lesson-panel__teacher-name { font-weight: var(--w-medium); color: var(--fg-1); }

/* Player do Vimeo (injetado pelo main.js) */
.player__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Oferta (card, modal, painel) ---------- */
.offer { display: flex; flex-direction: column; gap: var(--s-4); }

.offer__text { font-size: var(--fs-ui); color: var(--fg-2); }

.offer__option { display: flex; flex-direction: column; gap: var(--s-2); }

.offer__hint { font-size: var(--fs-ui-sm); line-height: var(--lh-ui); color: var(--fg-3); }

.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-1);
}

.share-buttons__link {
  flex-basis: 100%;
  min-height: var(--btn-h-sm);
  padding: 0 var(--s-3);
  border: var(--line);
  border-radius: var(--r-button);
  background: var(--surface-2);
  color: var(--fg-1);
  font-family: var(--font-mono);
  font-size: var(--fs-ui-sm);
}

.share-buttons__status {
  flex-basis: 100%;
  font-size: var(--fs-ui-sm);
  color: var(--volt);
}

.offer__close { align-self: center; }

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}

.modal__backdrop { position: absolute; inset: 0; background: var(--scrim); }

.offer--modal {
  position: relative;
  width: 100%;
  max-width: var(--modal-max);
  max-height: calc(100vh - var(--s-6));
  overflow-y: auto;
  border: var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  padding: var(--s-5);
}

/* Painel de saída (sobe do rodapé) */
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sheet);
  border-top: var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface-1);
  padding: var(--s-5) 0;
}

.sheet__inner { display: flex; flex-direction: column; gap: var(--s-4); }
.sheet__copy { display: flex; flex-direction: column; gap: var(--s-2); }
.sheet__actions { display: flex; flex-direction: column; gap: var(--s-2); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--btn-h);
  padding: 0 var(--s-5);
  border: var(--border-clear);
  border-radius: var(--r-button);
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  font-weight: var(--w-medium);
  line-height: var(--lh-ui);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.btn--primary { background: var(--volt); color: var(--volt-text); }
.btn--primary:hover { background: var(--volt-deep); color: var(--ink); border-color: transparent; } /* Ink sobre volt-deep: 5.3:1 */

.btn--secondary { background: transparent; color: var(--fg-1); border-color: var(--border-strong); }
.btn--secondary:hover { border-color: var(--volt); color: var(--volt); }

.btn--ghost { background: transparent; color: var(--fg-2); }
.btn--ghost:hover { color: var(--fg-1); }

.btn--block { width: 100%; }
.btn--compact { min-height: var(--btn-h-sm); padding: 0 var(--s-3); font-size: var(--fs-ui-sm); }
.btn--lg { min-height: var(--btn-h-lg); padding: 0 var(--s-6); }

.btn .icon { width: var(--icon-sm); height: var(--icon-sm); flex-shrink: 0; }
.btn__arrow { transition: transform var(--dur-fast) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(var(--nudge)); }

/* ---------- Seções ---------- */
.section { padding: var(--s-7) 0; border-top: var(--hairline); }

.section__title {
  font-size: var(--fs-h1-mobile);
  letter-spacing: var(--track-tight);
}

/* O que você vai ver */
.learn-list {
  list-style: none;
  padding: 0;
  margin-top: var(--s-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
}

.learn-item {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border: var(--line);
  border-radius: var(--r-card);
  background: var(--surface-1);
}

.learn-item__num {
  font-family: var(--font-mono);
  font-size: var(--fs-ui-sm);
  font-weight: var(--w-medium);
  color: var(--volt);
}

.learn-item__title { font-size: var(--fs-h4); }
.learn-item__text { font-size: var(--fs-ui); color: var(--fg-2); }

/* Quem ensina */
.teacher {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  margin-top: var(--s-5);
}

.teacher__avatar {
  flex-shrink: 0;
  width: var(--avatar);
  height: var(--avatar);
  border: var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  object-fit: cover;
}

.teacher__body { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.teacher__name { font-size: var(--fs-h4); font-weight: var(--w-medium); color: var(--fg-1); }
.teacher-link,
.teacher-link:hover { color: inherit; border-bottom: var(--hairline); }
.teacher-link:hover { border-bottom-color: var(--volt); }

.teacher__role { font-size: var(--fs-ui); color: var(--fg-3); }
.teacher__bio { margin-top: var(--s-2); }

/* Quem é a Slyng */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
}

.about__intro { display: flex; flex-direction: column; gap: var(--s-4); }

.about__cases { display: flex; flex-direction: column; gap: var(--s-5); }

.case-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
}

.case-grid > li { display: flex; }

.case-card,
.case-card:hover {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--s-5);
  border: var(--hairline);
  border-radius: var(--r-card);
  background: var(--surface-1);
  color: var(--fg-1);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease);
}

.case-card:hover { border-color: var(--volt); }

.case-card__label,
.case-card__meta,
.case-card__more {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--track-mono-label);
  line-height: var(--lh-ui);
  text-transform: uppercase;
}

.case-card__label { color: var(--fg-3); }

.case-card__num {
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-case-num);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-case-num);
  line-height: 1;
  color: var(--volt);
}

.case-card__text {
  flex-grow: 1;
  margin-top: var(--s-3);
  font-size: var(--fs-ui);
  font-weight: var(--w-medium);
  line-height: var(--lh-ui);
  color: var(--fg-1);
}

.case-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.case-card__meta { color: var(--fg-3); }
.case-card__more { flex-shrink: 0; font-weight: var(--w-medium); color: var(--fg-1); }
.case-card:hover .case-card__more { color: var(--volt); }

.about__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.about__all,
.about__all:hover {
  font-size: var(--fs-ui);
  font-weight: var(--w-medium);
  color: var(--fg-1);
  border-bottom: 0;
}

.about__all:hover { color: var(--volt); }

.about__signature {
  font-size: var(--fs-ui);
  font-weight: var(--w-medium);
  color: var(--volt);
}

/* CTA repetido */
.section--cta { text-align: center; }
.cta-repeat { display: flex; justify-content: center; }

/* ---------- Rodapé ---------- */
.site-footer {
  border-top: var(--hairline);
  padding: var(--s-6) 0 var(--s-9);
  font-size: var(--fs-ui-sm);
  color: var(--fg-3);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.site-footer a { color: var(--fg-2); }

/* ---------- Banner de cookies (barra fina no rodapé) ---------- */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-banner);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  row-gap: var(--s-1);
  column-gap: var(--s-3);
  min-height: var(--cookie-bar-h);
  padding: var(--cookie-pad-y) var(--gutter);
  border-top: var(--line);
  background: var(--surface-2);
}

.cookie-banner__text {
  flex: 1 1 100%;
  min-width: 0;
  font-size: var(--fs-cookie);
  line-height: var(--lh-cookie);
  color: var(--fg-2);
}

.cookie-banner__actions { flex-shrink: 0; display: flex; gap: var(--s-2); }
.cookie-banner .btn--compact { min-height: var(--btn-h-xs); padding: 0 var(--s-3); font-size: var(--fs-cookie); }

/* Telas muito estreitas: a barra ganha uma terceira linha de texto */
@media (max-width: 359px) {
  :root { --cookie-bar-h: 88px; }
}

/* ============================================================
   Desktop: 2 colunas a partir de 900px
   ============================================================ */
@media (min-width: 900px) {
  .container { padding: 0 var(--gutter-desktop); }

  .only-desktop { display: inline; }
  .only-mobile { display: none; }

  .hero { padding: var(--s-7) 0 var(--s-8); }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr) var(--side-col);
    gap: var(--s-7);
    align-items: start;
  }

  .hero__title {
    font-size: var(--fs-h1-desktop);
    letter-spacing: var(--track-h1);
  }

  .section { padding: var(--s-8) 0; }
  .section__title { font-size: var(--fs-h1-mobile); }

  .learn-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .lesson-panel { display: flex; }

  /* Painel/card acompanham o player ao rolar (o header não é fixo: só um respiro no topo) */
  .hero__side { position: sticky; top: var(--s-5); }

  /* Desbloqueado: o painel "Nesta aula" já mostra os tópicos (R19) */
  .is-unlocked .section--learn { display: none; }

  .about { gap: var(--s-6); }
  .about__text { max-width: var(--text-max); }
  .case-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .sheet__inner { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .sheet__inner .share-buttons { flex-basis: 100%; justify-content: flex-end; }
  .sheet__actions { flex-direction: row; align-items: center; }

  body:has(#cookie-banner:not([hidden])) { padding-bottom: var(--cookie-bar-h-desktop); }

  .cookie-banner {
    flex-wrap: nowrap;
    height: var(--cookie-bar-h-desktop);
    min-height: 0;
    justify-content: center;
    gap: var(--s-5);
    padding: 0 var(--gutter-desktop);
  }

  .cookie-banner__text { flex: 0 1 auto; font-size: var(--fs-ui-sm); }
  .cookie-banner .btn--compact { min-height: var(--btn-h-sm); font-size: var(--fs-ui-sm); }
}