/*
 * LP Therasin - edicoes do Figma (frame "LP DESKTOP", 1920px) sobre a base do site.
 * Mobile primeiro; a partir de 1024px valem as medidas exatas do Figma.
 * Em secao com borda no topo (1px), o padding-top ja desconta a borda.
 */

/* ---------- base ---------- */
.t-box { margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
.t-w728 { max-width: calc(728px + 40px); }
.t-w768 { max-width: calc(768px + 40px); }
.t-w864 { max-width: calc(864px + 40px); }
.t-w866 { max-width: calc(866px + 40px); }
.t-w1112 { max-width: calc(1112px + 40px); }
.t-w1113 { max-width: calc(1113px + 40px); }
.t-w1180 { max-width: calc(1181px + 40px); }
.t-w1291 { max-width: calc(1291.09px + 40px); }
.t-w1303 { max-width: calc(1303.02px + 40px); }
.t-w1342 { max-width: calc(1342px + 40px); }
.t-center { text-align: center; }
.t-muted { color: var(--muted-foreground); }
.t-br { display: none; }

.t-h2 { font-weight: 500; font-size: 30px; line-height: 1.25; letter-spacing: -.025em; color: var(--foreground); }

.t-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 28px; border-radius: 9999px;
  font-size: 16px; line-height: 20px; font-weight: 500; white-space: nowrap;
}

/* grade de fundo limitada a 1440px e centralizada (como no Figma) */
.t-grid { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto; max-width: 1440px; }
.t-grid-forte {
  background-image: linear-gradient(oklch(62% .21 292 / .19) 1px, #0000 1px), linear-gradient(90deg, oklch(62% .21 292 / .19) 1px, #0000 1px);
  background-size: 64px 64px;
}

/* ---------- 1. hero ---------- */
.t-hero { padding: 48px 0 80px; }
.t-logo { display: block; width: 132px; height: auto; margin: 0 auto; }
.t-h1 { max-width: 832.5px; margin: 28px auto 0; font-size: 36px; line-height: 1.08; letter-spacing: -.025em; font-weight: 500; }
.t-hero-sub { max-width: 832.5px; margin: 20px auto 0; font-size: 16px; line-height: 1.625; }
.t-vsl { max-width: 768px; margin: 40px auto 0; }
.t-vsl-legenda { position: absolute; left: 0; right: 0; bottom: 0; padding: 23px 24px; text-align: center; font-size: 14px; line-height: 20px; }
/* player: autoplay sem som + convite para ouvir (capa com play so aparece se o navegador bloquear o autoplay) */
.t-vsl-player { background: #000; }
.t-vsl-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.t-vsl-som, .t-vsl-capa { position: absolute; inset: 0; }
.t-vsl-som[hidden], .t-vsl-capa[hidden] { display: none; }
.t-vsl-som { display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--foreground); font: inherit; }
.t-vsl-som-caixa {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 8%;
  padding: 12px 20px 12px 12px; border-radius: 9999px; text-align: left;
  background: oklch(13% .035 295 / .78); border: 1px solid oklch(74% .17 295 / .45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: var(--shadow-glow); transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.t-vsl-som:hover .t-vsl-som-caixa, .t-vsl-som:focus-visible .t-vsl-som-caixa { transform: scale(1.04); }
.t-vsl-som-icone { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 9999px; background-image: var(--gradient-primary); animation: t-som-pulso 2s ease-in-out infinite; }
.t-vsl-som-texto { display: flex; flex-direction: column; gap: 2px; }
.t-vsl-som-titulo { font-size: 16px; line-height: 20px; font-weight: 600; }
.t-vsl-som-acao { font-size: 14px; line-height: 18px; color: var(--muted-foreground); }
.t-toque { display: none; }
@media (hover: none) { .t-clique { display: none; } .t-toque { display: inline; } }
@keyframes t-som-pulso { 0%, 100% { box-shadow: 0 0 0 0 oklch(62% .21 292 / .6); } 50% { box-shadow: 0 0 0 10px oklch(62% .21 292 / 0); } }
@media (prefers-reduced-motion: reduce) { .t-vsl-som-icone { animation: none; } }
@media (max-width: 639.98px) {
  .t-vsl-som-caixa { gap: 9px; padding: 8px 14px 8px 8px; }
  .t-vsl-som-icone { width: 34px; height: 34px; }
  .t-vsl-som-icone svg { width: 18px; height: 18px; }
  .t-vsl-som-titulo { font-size: 13px; line-height: 16px; }
  .t-vsl-som-acao { font-size: 12px; line-height: 15px; }
}
@media (min-width: 1024px) {
  .t-vsl-som-caixa { gap: 16px; padding: 14px 30px 14px 14px; }
  .t-vsl-som-icone { width: 60px; height: 60px; }
  .t-vsl-som-icone svg { width: 28px; height: 28px; }
  .t-vsl-som-titulo { font-size: 22px; line-height: 28px; }
  .t-vsl-som-acao { font-size: 17px; line-height: 22px; }
}
.t-hero-cta { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.t-hero-cta .t-btn { font-weight: 700; padding: 0 24px; }
.t-nota { font-size: 12px; line-height: 16px; }

/* ---------- 2. copiloto ---------- */
.t-s2 { padding: 64px 0 64px; }
.t-s2-sub { max-width: 800px; margin: 16px auto 0; font-size: 16px; line-height: 1.5; }
.t-s2-cards { margin-top: 40px; display: grid; gap: 24px; }
.t-card-titulo { font-size: 18px; line-height: 28px; font-weight: 500; }
.t-s2-print { margin-top: 32px; }
.t-print-card {
  border-radius: 24px; padding: 3.039% 4.027%;
  box-shadow: 0 20px 79.6px -30px var(--primary), var(--shadow-card);
}
.t-print { position: relative; overflow: hidden; border-radius: 13px; }
.t-print img { display: block; width: 100%; height: auto; aspect-ratio: 1231.92 / 702.44; object-fit: cover; object-position: left center; }
.t-print::after { content: ""; position: absolute; inset: 0; border: 1px solid oklch(62% .21 292 / .58); border-radius: inherit; pointer-events: none; }

/* ---------- 3. onde ele entra ---------- */
.t-s3 { padding: 96px 0; }
.t-s3 .t-h2 { max-width: 768px; }
.t-s3-grid { margin-top: 56px; display: grid; gap: 20px; align-items: start; }
.t-s3-cards > * + * { margin-top: 20px; }
.t-celular-card { border-radius: 33.9px; padding: 1.3045%; box-shadow: 0 28.25px 84.76px -42.38px oklch(5% .02 295 / .9); }
.t-celular { overflow: hidden; border-radius: 28.25px; }
.t-celular img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

/* ---------- 4. acompanhamento ---------- */
.t-s4 { padding: 96px 0; }
.t-s4-grid { display: grid; gap: 48px; align-items: start; }
.t-eyebrow { font-size: 12px; line-height: 16px; letter-spacing: .25em; text-transform: uppercase; color: var(--primary-glow); }
.t-s4 .t-h2 { margin-top: 16px; }
.t-s4-textos { margin-top: 24px; font-size: 14px; line-height: 22.75px; }
.t-s4-textos > * + * { margin-top: 16px; }

/* ---------- 5. biblioteca ---------- */
.t-s5 { padding: 96px 0; }
.t-s5-sub { margin-top: 24px; font-size: 14px; line-height: 1.625; }
.t-tela { position: relative; margin-top: 40px; overflow: hidden; border-radius: 16px; aspect-ratio: 1303.02 / 740.12; }
.t-tela img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.t-tela::after { content: ""; position: absolute; inset: 0; border: 1px solid oklch(62% .21 292 / .58); border-radius: inherit; pointer-events: none; }
.t-pilulas-titulo { margin-top: 40px; font-size: 16px; line-height: 1.4; font-weight: 500; }
.t-pilulas { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.t-pilulas-linha { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---------- 6. para quem ---------- */
.t-s6 { padding: 96px 0; }
.t-s6 .t-btn { font-size: 16px; font-weight: 600; }

/* ---------- 7. faq ---------- */
.t-s7 { padding: 96px 0; }

/* ---------- 8. cta final ---------- */
.t-s8 { padding: 111px 0 112px; }
.t-s8-sub { margin-top: 12px; font-size: 16px; line-height: 24px; }
.t-s8-cta { margin-top: 24px; }

/* ---------- rodape ---------- */
.t-rodape { padding: 47px 0 56px; }
.t-rodape .t-logo { width: 150px; }

/* as sombras acima sobrescrevem a do hover do .lift (a base fica numa @layer); devolve o brilho no hover */
.t-print-card.lift:hover, .t-celular-card.lift:hover, .t-pilula.lift:hover { box-shadow: var(--shadow-glow); }

/* celular: legenda do video mais baixa, pra nao ficar por baixo do play */
@media (max-width: 639.98px) {
  .t-vsl-legenda { padding: 10px 16px; font-size: 12px; line-height: 16px; }
}

/* ---------- tablet ---------- */
@media (min-width: 640px) {
  .t-h2 { font-size: 36px; }
  .t-h1 { font-size: 48px; }
  .t-hero-sub { font-size: 18px; }
  .t-logo { width: 160px; }
  .t-btn { font-size: 18px; }
  .t-s2-sub { font-size: 20px; line-height: 28px; }
  .t-s5-sub { font-size: 18px; line-height: 1.5; }
  .t-pilulas-titulo { font-size: 20px; }
  .t-s8-sub { font-size: 18px; }
}
@media (min-width: 768px) {
  .t-s2-cards { grid-template-columns: 1fr 1fr; }
}

/* ---------- desktop: medidas do Figma ---------- */
@media (min-width: 1024px) {
  .t-br { display: inline; }

  .t-hero { padding: 86.37px 0 96px; }
  .t-logo, .t-rodape .t-logo { width: 200.54px; }
  .t-h1 { margin-top: 32.87px; font-size: 60px; line-height: 64.8px; letter-spacing: -1.5px; }
  .t-hero-sub { margin-top: 27.4px; font-size: 22px; line-height: 29.25px; }
  .t-vsl { margin-top: 48.33px; }
  .t-hero-cta { margin-top: 39.78px; gap: 12.22px; }
  .t-hero-cta .t-btn { font-size: 24px; padding: 0 19.5px; }
  .t-nota { font-size: 16px; line-height: 16px; }

  .t-h2 { font-size: 44px; line-height: 55px; letter-spacing: -1.1px; }
  .t-h2-xl { font-size: 60px; }

  .t-s2 { padding: 64px 0 35.67px; }
  .t-s2-sub { margin-top: 20px; font-size: 28px; line-height: 36px; }
  .t-s2-cards { margin-top: 39.87px; }
  .t-card-titulo { font-size: 22px; }
  .t-s2-print { margin-top: 39.66px; }

  .t-s3-grid { grid-template-columns: 589.59fr 681.5fr; }
  .t-celular-card { -webkit-backdrop-filter: blur(11.3px); backdrop-filter: blur(11.3px); }

  .t-s4 { padding: 92.67px 0 110.33px; }
  .t-s4-grid { grid-template-columns: 533fr 533fr; gap: 47px; }
  .t-s4 .t-h2 { margin-top: 15px; }
  .t-s4-textos { margin-top: 15px; }
  .t-s4-textos > * + * { margin-top: 15.5px; }
  .t-s4-imagem { margin-top: 15.23px; }
  .t-s4-imagem > .surface-card { max-width: 532px; }

  .t-s5 { padding: 95.83px 0 66.1px; }
  .t-s5-sub { font-size: 22px; line-height: 22.75px; }
  .t-tela { margin-top: 38.03px; border-radius: 28px; }
  .t-pilulas-titulo { margin-top: 43.23px; font-size: 28px; line-height: 20px; }
  .t-pilulas { margin-top: 43.23px; gap: 13px; }
  .t-pilulas-linha { gap: 13px; }
  .t-pilula { font-size: 13px; line-height: 17.34px; padding: 8.75px 17.42px; box-shadow: 0 21.67px 65px -32.5px oklch(5% .02 295 / .9); }

  .t-s6 { padding: 96px 0; }
  .t-s6 .t-btn { font-size: 22px; padding: 0 25px; }

  .t-s7 .t-h2 { font-size: 60px; line-height: 40px; letter-spacing: -.9px; }

  .t-s8 { padding: 131.5px 0 132.5px; }
  .t-s8 h2 { line-height: 60px; }
  .t-s8-sub { margin-top: 10px; font-size: 22px; }
  .t-s8-cta { margin-top: 10px; }
  .t-s8 .t-btn { font-size: 24px; padding: 0 28px; }

  .t-rodape { padding-top: 46.98px; }
}