/* luzz.app — layout da landing. Tokens e componentes vêm de tokens.css e luzz.css (design system). */

html { color-scheme: light; scroll-behavior: smooth; }
[data-theme="noite"] { color-scheme: dark; }
body { margin: 0; background: var(--surface); color: var(--ink); font: var(--text-body); -webkit-font-smoothing: antialiased; }
img, picture { display: block; max-width: 100%; }
a { color: var(--link); }
p { margin: 0; }
h1, h2, h3 { margin: 0; }
.h2, .h3, .h4 { color: var(--ink); }
.body-sm { font: var(--text-body-sm); color: var(--ink-soft); }
.body { font: var(--text-body); color: var(--ink-soft); }
.label { font: var(--text-label); }

/* Larguras ---------------------------------------------------------- */
:root { --gutter: var(--space-5); --page: 1280px; --avatar: 40px; }
[hidden] { display: none !important; }
.site-header, .hero, .sec, .site-footer { padding-left: var(--gutter); padding-right: var(--gutter); }
.sec { padding-top: var(--space-9); max-width: var(--page); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-4); box-sizing: border-box; }
.sec-head { display: flex; align-items: baseline; gap: var(--space-5); flex-wrap: wrap; }

/* Cabeçalho --------------------------------------------------------- */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: 18px; padding-bottom: 18px; max-width: var(--page); margin: 0 auto; box-sizing: border-box; }
.site-nav { display: none; align-items: center; gap: var(--space-7); font: 700 15px/1.2 var(--font-sans); }
.site-nav a { color: var(--ink); text-decoration: none; }
.site-nav a:hover { color: var(--brasa); }
.site-nav .lz-btn { color: var(--surface); }
.site-header-eyebrow { text-align: right; }
.site-header-end { display: flex; align-items: center; gap: var(--space-3); }
.tema-toggle { margin-left: 0; margin-right: calc(var(--space-2) * -1); color: var(--ink); border-radius: 999px; }
.tema-toggle:hover { background: var(--surface-sunk, rgba(127,127,127,.12)); }

/* Hero ---------------------------------------------------------------- */
.hero { max-width: var(--page); margin: 0 auto; display: grid; gap: var(--space-9); padding-top: var(--space-2); box-sizing: border-box; }
.hero-copy { display: flex; flex-direction: column; gap: var(--space-4); }
.hero-eyebrow { display: none; }
.hero-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2); }
.hero-title { font: var(--text-h1); letter-spacing: -0.02em; max-width: 250px; }
.hero-title .dot { color: var(--chama); }
.hero-luzin img { height: 128px; width: auto; margin-right: -10px; margin-bottom: -6px; animation: flutuar 4s var(--easing-standard) infinite alternate; }
.hero-lead { font: var(--text-body); color: var(--ink-soft); }
.hero-cta { display: flex; flex-direction: column; gap: var(--space-3); }
.hero-cta .lz-btn { width: 100%; box-sizing: border-box; }
.hero-cta .lz-btn, .amostra-cta, .footer-cta { font-size: 16px; padding-left: var(--space-4); padding-right: var(--space-4); }
.hero-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.lz-consent { text-align: center; }

/* Amostra ------------------------------------------------------------ */
.amostra { display: flex; flex-direction: column; gap: var(--space-4); }
.amostra-intro { padding-right: 96px; }
.amostra-panel { position: relative; }
.amostra-luzin { position: absolute; right: -6px; top: -58px; z-index: 1; }
.amostra-luzin img { height: 92px; width: auto; }
.amostra-luzin-d { display: none; }
.amostra-after { text-align: center; }

/* Grids e cartões ----------------------------------------------------- */
.grid-2, .grid-3 { display: grid; gap: var(--space-4); }
.card { background: var(--surface-raised); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.card-pad { padding: 0; }
.note-card { background: var(--surface-raised); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.lz-stat-num { font-size: 40px; }

/* No app --------------------------------------------------------------- */
.no-app { gap: var(--space-5); }
.app-head { display: flex; flex-direction: column; gap: var(--space-3); }
.app-features { display: flex; flex-direction: column; gap: var(--space-5); }
.app-panel { position: relative; background: var(--surface-deep); border-radius: var(--radius-xl); padding: var(--space-6) var(--space-5) 0; display: flex; justify-content: flex-end; overflow: hidden; }
.app-luzin { position: absolute; left: 6px; top: 22px; }
.app-luzin img { height: 118px; width: auto; }
.app-phone { width: 222px; height: 400px; margin-left: 84px; box-sizing: border-box; background: var(--surface); color: var(--ink); border-radius: 28px 28px 0 0; border: 8px solid #2b2d4a; border-bottom: none; padding: 14px 14px 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.app-top { display: flex; justify-content: space-between; font: 700 10px/1.3 var(--font-sans); color: var(--ink-muted); }
.app-day { color: var(--brasa); }
.app-phone .h4 { font-size: 16px; }
.app-phone .lz-verse-compact { padding: 10px 12px; border-radius: 14px; }
.app-phone .lz-verse-ref { font-size: 10px; }
.app-phone .lz-verse-compact .lz-verse-text { font-size: 11px; line-height: 1.4; }
.app-touches { display: flex; flex-direction: column; gap: 6px; }
.app-phone .lz-touch { min-height: 0; padding: 8px 10px; font-size: 12px; border-radius: 10px; gap: 8px; cursor: default; }
.app-phone .lz-touch-check { width: 18px; height: 18px; }
.app-phone .lz-touch-check svg { width: 11px; height: 11px; }
.app-phone .lz-week { padding: 8px 10px 9px; border-radius: 12px; }
.app-phone .lz-week-head { font-size: 9.5px; }
.app-phone .lz-dot { width: 20px; height: 20px; }
.app-phone .lz-week-letter { font-size: 9px; }
.app-phone .lz-week-note { font-size: 9.5px; }
.soon { gap: var(--space-3); padding: var(--space-5); }
.soon-title { font: 800 14px/1.3 var(--font-sans); color: var(--ink-muted); }
.soon-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* FAQ ------------------------------------------------------------------ */
.faq-grid { display: flex; flex-direction: column; gap: var(--space-3); }
/* Celular: as duas colunas somem e as perguntas voltam à ordem 1–8 (coluna 1 = ímpares, coluna 2 = pares). */
.faq-col { display: contents; }
.faq-col:nth-child(1) > :nth-child(1) { order: 1; } .faq-col:nth-child(2) > :nth-child(1) { order: 2; }
.faq-col:nth-child(1) > :nth-child(2) { order: 3; } .faq-col:nth-child(2) > :nth-child(2) { order: 4; }
.faq-col:nth-child(1) > :nth-child(3) { order: 5; } .faq-col:nth-child(2) > :nth-child(3) { order: 6; }
.faq-col:nth-child(1) > :nth-child(4) { order: 7; } .faq-col:nth-child(2) > :nth-child(4) { order: 8; }

/* Rodapé ---------------------------------------------------------------- */
.site-footer { max-width: var(--page); margin: var(--space-9) auto 0; padding-top: var(--space-6); border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; box-sizing: border-box; }
.footer-luzin { height: 160px; width: auto; margin-bottom: var(--space-1); }
.footer-cta { width: 100%; box-sizing: border-box; }
.footer-legal { padding: var(--space-2) 0 var(--space-6); }
.footer-legal a { color: inherit; }

/* Movimento -------------------------------------------------------------- */
@keyframes flutuar { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .hero-luzin img { animation: none; } }

/* Desktop ---------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root { --gutter: var(--space-20); }
  .sec { padding-top: var(--space-20); gap: var(--space-7); }
  .sec > .h2, .sec-head .h2, .app-head .h2 { font-size: 38px; line-height: 1.1; }
  .site-header { padding-top: 26px; padding-bottom: 26px; }
  .site-header .lz-logo { font-size: 30px !important; }
  .site-nav { display: flex; }
  .site-header-end { gap: var(--space-7); }
  .site-header-eyebrow { display: none; }

  .hero { grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; padding-top: 30px; }
  .hero-copy { gap: 22px; }
  .hero-eyebrow { display: inline-block; }
  .hero-title { font: var(--text-display); letter-spacing: -0.03em; max-width: none; }
  .hero-luzin { display: none; }
  .hero-lead { font: var(--text-lead); max-width: var(--measure); }
  .hero-cta { flex-direction: row; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
  .hero-tags { flex-wrap: nowrap; }
  .hero-cta .lz-btn { width: auto; white-space: nowrap; }
  .hero-cta .lz-tag { white-space: nowrap; }
  .lz-consent { text-align: left; max-width: var(--measure); }

  .amostra { align-items: center; gap: var(--space-4); }
  .amostra-title, .amostra-intro, .amostra-cta { display: none; }
  .amostra-panel { width: 560px; height: 600px; background: var(--surface-deep); border-radius: 36px 36px 0 0; display: flex; justify-content: flex-end; align-items: flex-end; padding-right: 40px; box-sizing: border-box; overflow: hidden; }
  .amostra-luzin { right: auto; left: 14px; top: 64px; }
  .amostra-luzin-m { display: none; }
  .amostra-luzin-d { display: block; }
  .amostra-luzin img { height: 236px; }
  .phone { width: 300px; height: auto; padding-bottom: 28px; margin-bottom: 0; box-sizing: border-box; background: #090b1a; border-radius: 34px 34px 0 0; border: 9px solid #2b2d4a; border-bottom: none; padding: 16px 14px 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
  .phone .lz-chat { padding: 0; border: 0; border-radius: 0; background: transparent; }
  .phone .lz-chat-bubble { font-size: 11.5px; line-height: 1.45; padding: 11px 12px; }
  .phone .lz-chat-label { font-size: 9.5px; margin-top: 8px; }
  .phone .lz-chat-foot { font-size: 9.5px; }
  .phone .lz-chat-reply { font-size: 11px; padding: 8px 11px; }
  .amostra-after { font: 400 15px/1.5 var(--font-sans); color: var(--ink-muted); }

  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
  .grid-2 { grid-template-columns: 1.2fr 1fr; gap: var(--space-5); }
  .card-pad { background: var(--surface-raised); border-radius: var(--radius-lg); padding: var(--space-6); }
  .card-pad .lz-feature-title { font: var(--text-h3); }
  .card-pad .lz-feature-text { font: var(--text-body); margin-top: 6px; }
  .lz-stat-num { font-size: 56px; }
  .note-card { background: transparent; padding: 0; font: var(--text-body); color: var(--ink-muted); }

  .no-app { display: grid; grid-template-columns: 1fr 1.1fr; grid-template-areas: "panel head" "panel feats"; gap: 22px 60px; align-items: start; }
  .app-panel { grid-area: panel; }
  .app-head { grid-area: head; gap: 22px; }
  .app-features { grid-area: feats; }
  .app-panel { border-radius: 36px; height: auto; padding: 40px 24px 0; align-items: flex-end; }
  .app-luzin { left: 12px; top: 56px; }
  .app-luzin img { height: 200px; }
  .app-phone { width: 300px; height: auto; padding-bottom: 36px; margin: 0; border-radius: 34px 34px 0 0; border-width: 9px; padding: 18px 16px 0; gap: 12px; }
  .app-top { font-size: 11px; }
  .app-phone .h4 { font-size: 19px; }
  .app-phone .lz-verse-compact { padding: 14px; border-radius: 16px; }
  .app-phone .lz-verse-ref { font-size: 11px; }
  .app-phone .lz-verse-compact .lz-verse-text { font-size: 13px; line-height: 1.45; }
  .app-phone .lz-touch { padding: 10px 12px; font-size: 13px; border-radius: 12px; gap: 10px; }
  .app-phone .lz-touch-check { width: 20px; height: 20px; }
  .app-phone .lz-touch-check svg { width: 12px; height: 12px; }
  .app-phone .lz-week { padding: 10px 12px 11px; border-radius: 14px; }
  .app-phone .lz-week-head { font-size: 10px; }
  .app-phone .lz-dot { width: 22px; height: 22px; }
  .app-phone .lz-week-letter { font-size: 10px; }
  .app-phone .lz-week-note { font-size: 10.5px; }
  .app-features .lz-feature-title { font-size: 17px; }
  .app-features .lz-feature-text { font: var(--text-body); }
  .hero-cta .lz-btn, .footer-cta { font-size: 17px; padding-left: var(--space-7); padding-right: var(--space-7); }

  /* Computador: duas colunas independentes; abrir uma pergunta não empurra a coluna ao lado. */
  .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; align-items: start; }
  .faq-col { display: flex; flex-direction: column; gap: var(--space-5); }
  .site-footer { margin-top: var(--space-20); padding-top: var(--space-9); gap: var(--space-4); }
  .footer-luzin { height: 200px; }
  .footer-title { font: 700 32px/1.1 var(--font-display); letter-spacing: -0.02em; }
  .footer-cta { width: auto; }
  .footer-legal { padding-bottom: var(--space-9); }
}