/* Landing page · dobras com animação. Usa os tokens de brand.css (tema claro/escuro).
   Seções .on-ink são sempre escuras. Todo o movimento respeita prefers-reduced-motion. */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body.landing { margin: 0; font-size: 1.0625rem; line-height: 1.6; overflow-x: hidden; }
.landing h1, .landing h2, .landing h3 { margin: 0; letter-spacing: -.025em; }
.landing p { margin: 0; }
.l-wrap { width: min(1080px, 100%); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); display: grid; gap: 20px; }
.l-eyebrow { font: 700 .8rem/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-fg); }
.l-sub { color: var(--fg-2); font-size: 1.15rem; max-width: 60ch; }
.l-lead { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--fg-2); max-width: 54ch; }
.l-section { padding-block: clamp(64px, 10vw, 128px); display: grid; gap: clamp(28px, 4vw, 48px); }
.l-section h2, .l-morph h2, .l-final h2 { font-size: clamp(1.9rem, 4.6vw, 3.2rem); font-weight: 700; font-stretch: 88%; line-height: 1.05; text-wrap: balance; max-width: 20ch; }
.l-alt { background: var(--surface-2); border-block: 1px solid var(--line); }
.l-two > div:first-child { display: grid; gap: 18px; align-content: center; }
.l-two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: center; gap: clamp(24px, 5vw, 64px); }
.on-ink { --bg: #0B1B2B; --surface: #13293D; --surface-2: #0F2234; --fg: #F2F6F4; --fg-2: #B7C6CC; --accent: #5BE3C4; --accent-fg: #5BE3C4; --on-accent: #0B1B2B; --line: #25405A; --logo-ink: #F2F6F4; --logo-accent: #5BE3C4; background: var(--bg); color: var(--fg); }

/* Botões */
.l-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 99px; font: 700 1rem var(--font-body); text-decoration: none; border: 1.5px solid transparent; transition: transform .2s, background .2s, border-color .2s; }
.l-btn:hover { transform: translateY(-2px); }
.l-btn-solid { background: var(--accent); color: var(--on-accent); }
.l-btn-solid:hover { background: var(--accent-hover, var(--accent)); }
.l-btn-ghost { border-color: color-mix(in srgb, var(--fg) 45%, transparent); color: var(--fg); background: transparent; }
.l-btn-ghost:hover { border-color: var(--accent); }
.l-btn-lg { min-height: 52px; padding: 0 30px; font-size: 1.05rem; }

/* Cabeçalho */
.l-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 10px clamp(16px, 4vw, 40px); padding-top: calc(10px + env(safe-area-inset-top, 0px)); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.l-logo { display: inline-flex; margin-right: auto; border-radius: 8px; }
.l-logo .logo-lockup { height: 30px; }
.l-nav { display: flex; gap: 6px; }
.l-nav a { color: var(--fg-2); text-decoration: none; font-weight: 700; padding: 10px 14px; border-radius: 99px; }
.l-nav a:hover { color: var(--fg); background: var(--tint); }
.l-actions { display: flex; align-items: center; gap: 10px; }
@media (max-width: 880px) { .l-nav { display: none; } }
@media (max-width: 520px) { .l-header .theme-toggle { padding: 0; width: 44px; } .l-header .theme-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .l-logo .logo-lockup { height: 26px; } }

/* 1 · Hero */
.l-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(24px, 5vw, 72px); padding: clamp(40px, 8vw, 104px) clamp(16px, 5vw, 72px); overflow: hidden; }
.l-hero-copy { display: grid; gap: 24px; max-width: 640px; }
.l-hero h1 { font-size: clamp(2.7rem, 7.4vw, 5.6rem); font-weight: 760; font-stretch: 90%; line-height: 1; letter-spacing: -.028em; text-wrap: balance; }
.l-cta-row { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
.l-scene { position: relative; aspect-ratio: 1; width: min(100%, 520px); justify-self: center; display: grid; place-items: center; }
.l-cell { width: 34%; height: auto; overflow: visible; filter: drop-shadow(0 20px 50px rgba(91, 227, 196, .25)); }
.l-cell .d, .l-cell-final .d { transform-box: fill-box; transform-origin: center; animation: dot-in .7s cubic-bezier(.2, .9, .3, 1.4) both; }
.d1 { animation-delay: .05s !important; } .d2 { animation-delay: .15s !important; } .d3 { animation-delay: .25s !important; } .d4 { animation-delay: .35s !important; } .d5 { animation-delay: .45s !important; } .d6 { animation-delay: .55s !important; }
@keyframes dot-in { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.l-chip { position: absolute; display: grid; gap: 1px; padding: 10px 16px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(0, 0, 0, .28); animation: chip-in .8s cubic-bezier(.2, .8, .2, 1) both, bob 6s ease-in-out infinite; }
.l-chip b { font: 700 .95rem var(--font-body); } .l-chip span { font-size: .8rem; color: var(--fg-2); }
.c1 { top: 4%; left: 0; animation-delay: .7s, 1.5s; } .c2 { top: 10%; right: 0; animation-delay: .85s, 2s; } .c3 { top: 46%; left: -2%; animation-delay: 1s, 2.5s; }
.c4 { bottom: 12%; right: 2%; animation-delay: 1.15s, 3s; } .c5 { bottom: 2%; left: 14%; animation-delay: 1.3s, 3.5s; }
@keyframes chip-in { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (max-width: 860px) {
  .l-hero { grid-template-columns: 1fr; text-align: left; }
  .l-scene { aspect-ratio: auto; width: 100%; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; align-items: center; }
  .l-cell { width: 76px; margin-right: 8px; }
  .l-chip { position: static; animation: chip-in .8s both; }
}

/* 2 · Um conteúdo, muitas formas. Sem JavaScript ou com movimento reduzido: as cinco versões ficam lado a lado. */
.l-morph { padding: clamp(64px, 10vw, 120px) clamp(16px, 5vw, 72px); }
.l-morph-pin { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 5vw, 72px); align-items: center; max-width: 1180px; margin-inline: auto; }
.l-morph-head { display: grid; gap: 18px; align-content: start; }
.l-modes { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
.l-modes button { min-height: 44px; padding: 0 18px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--surface); color: var(--fg); font: 700 .95rem var(--font-body); cursor: pointer; transition: background .2s, border-color .2s; }
.l-modes button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.l-sheets { display: grid; gap: 14px; }
.l-sheet { display: grid; gap: 10px; align-content: start; padding: clamp(20px, 3vw, 32px); border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.l-sheet h3 { font-size: 1.35rem; }
.l-tag { justify-self: start; font: 700 .75rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; background: var(--tint); color: var(--accent-fg); }
.l-sheet[data-mode="1"] p { font-size: 1.3rem; line-height: 1.85; }
.l-sheet[data-mode="2"] p { line-height: 2.1; letter-spacing: .05em; word-spacing: .14em; }
.l-sheet[data-mode="2"] mark { background: rgba(245, 182, 61, .45); color: inherit; padding: 2px 4px; border-radius: 4px; }
.l-sheet[data-mode="2"] .dim { color: var(--fg-2); }
.l-sheet[data-mode="3"] { background: #000; color: #FFE24A; border-color: #FFE24A; --fg: #FFE24A; } .l-sheet[data-mode="3"] p { font-weight: 700; font-size: 1.15rem; } .l-sheet[data-mode="3"] .l-tag { background: #FFE24A; color: #000; }
.l-wave { display: flex; align-items: center; gap: 4px; height: 56px; }
.l-wave i { width: 5px; border-radius: 3px; background: var(--accent-fg); height: 12px; animation: wave 1.2s ease-in-out infinite; }
.l-wave i:nth-child(3n) { animation-delay: .15s; } .l-wave i:nth-child(3n+1) { animation-delay: .4s; } .l-wave i:nth-child(5n) { animation-delay: .65s; }
@keyframes wave { 50% { height: 46px; } }
.l-morph.is-pinned { height: 420vh; padding-block: 0; }
.l-morph.is-pinned .l-morph-pin { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; }
.l-morph.is-pinned .l-sheets { display: grid; }
.l-morph.is-pinned .l-sheet { grid-area: 1 / 1; opacity: 0; transform: translateY(26px) scale(.97); pointer-events: none; visibility: hidden; transition: opacity .5s, transform .5s, visibility 0s .5s; }
.l-morph.is-pinned .l-sheet.on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .5s, transform .5s; }
@media (max-width: 860px) { .l-morph-pin { grid-template-columns: 1fr; } .l-morph.is-pinned { height: 380vh; } .l-morph.is-pinned .l-morph-pin { align-content: center; padding-block: 72px 24px; } }

/* 3 · Passos */
.l-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; counter-reset: s; position: relative; }
.l-steps li { display: grid; gap: 10px; align-content: start; padding: 26px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.l-step-n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font: 800 1.2rem var(--font-display); }
.l-steps h3 { font-size: 1.3rem; } .l-steps p { color: var(--fg-2); }

/* 4 · Formatos */
.l-io { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: center; }
.l-io-col { display: grid; gap: 14px; padding: 28px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); align-content: start; }
.l-io-col h3 { font-size: 1.25rem; }
.l-io ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.l-io li { padding-left: 26px; position: relative; }
.l-io li::before { content: ''; position: absolute; left: 0; top: .55em; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); }
.l-io li:first-child::before { background: var(--amber); }
.l-io .soon { color: var(--fg-2); } .l-io .soon::before { background: transparent; border: 2px solid var(--fg-2); }
.l-io em { font-style: normal; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; background: var(--tint); color: var(--fg); margin-left: 6px; }
.l-io-arrow svg { width: 72px; height: 22px; fill: none; stroke: var(--accent-fg); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 820px) { .l-io { grid-template-columns: 1fr; } .l-io-arrow { justify-self: center; transform: rotate(90deg); } }

/* 5 · Para quem */
.l-cards { list-style: none; margin: 0; padding: 4px clamp(16px, 4vw, 32px) 18px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: clamp(16px, 4vw, 32px); -webkit-overflow-scrolling: touch; }
.l-cards li { flex: 0 0 min(84vw, 330px); scroll-snap-align: start; display: grid; gap: 12px; align-content: start; padding: 28px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.l-cards li:nth-child(1) { border-top: 5px solid var(--amber); } .l-cards li:nth-child(2) { border-top: 5px solid var(--accent); } .l-cards li:nth-child(3) { border-top: 5px solid var(--fg-2); } .l-cards li:nth-child(4) { border-top: 5px solid var(--line-accent); }
.l-cards h3 { font-size: 1.3rem; } .l-cards p { color: var(--fg-2); }
@media (min-width: 1100px) { .l-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; width: min(1080px, 100%); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); } .l-cards li { flex: none; } }

/* 6 · Professor */
.l-ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; font-weight: 700; }
.l-ticks li { padding-left: 32px; position: relative; }
.l-ticks li::before { content: ''; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); }
.l-ticks li::after { content: ''; position: absolute; left: 6px; top: .42em; width: 8px; height: 4px; border-left: 2.5px solid var(--on-accent); border-bottom: 2.5px solid var(--on-accent); transform: rotate(-45deg); }
.l-mock { border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.l-mock-bar { display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.l-mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.l-mock-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 18px; position: relative; }
.l-mock-col { display: grid; gap: 10px; align-content: start; }
.l-mock-label { font: 700 .72rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
.l-mock-doc, .l-mock-edit { display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.l-mock b { display: block; height: 9px; border-radius: 5px; background: var(--line); } .l-mock b.s { width: 62%; }
.l-mock-edit { border-color: var(--accent); } .l-mock-edit em { font-style: normal; font-size: .8rem; font-weight: 700; color: var(--accent-fg); }
.l-stamp { justify-self: start; margin-top: 8px; padding: 8px 14px; border: 2.5px solid var(--accent); color: var(--accent-fg); border-radius: 10px; white-space: nowrap; font: 800 .78rem var(--font-display); letter-spacing: .04em; text-transform: uppercase; transform: rotate(-4deg); }

/* 7 · Ferramentas de acessibilidade da própria página */
.l-tools { display: grid; gap: 22px; padding: 28px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.l-tools > div { display: grid; gap: 10px; } .l-tools span { font-weight: 700; }
.l-tool-row { display: flex; gap: 10px; flex-wrap: wrap; }
.l-tool-row button { min-height: 48px; min-width: 56px; padding: 0 20px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--fg); font: 700 1.05rem var(--font-body); cursor: pointer; }
.l-tool-row button:hover { border-color: var(--accent); }
.l-tool-row button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* 8 · Final */
.l-final { display: grid; justify-items: center; text-align: center; gap: 22px; padding: clamp(72px, 12vw, 150px) clamp(16px, 5vw, 72px); }
.l-final h2 { max-width: 16ch; } .l-final .l-lead { max-width: 46ch; }
.l-cell-final { width: 76px; height: auto; overflow: visible; }
.l-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 28px clamp(16px, 5vw, 72px); padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--line); color: var(--fg-2); }
.l-footer .logo-lockup { height: 26px; }
.l-footer a { color: var(--accent-fg); font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }

/* Revelação ao rolar (landing.js marca os elementos com data-r e adiciona .reveal-ready).
   Sem JavaScript ou com movimento reduzido nada fica escondido. */
.reveal-ready [data-r]:not([data-r="dots"]) { opacity: 0; transform: translateY(56px) scale(.97); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); will-change: opacity, transform; }
.reveal-ready [data-r].in:not([data-r="dots"]) { opacity: 1; transform: none; }
.reveal-ready .l-io-col[data-r]:first-child { transform: translateX(-70px); } .reveal-ready .l-io-col[data-r]:last-child { transform: translateX(70px); }
.reveal-ready .l-io-col[data-r].in { transform: none; }
.reveal-ready .l-stamp[data-r] { transform: rotate(-4deg) scale(2.2); transition-duration: .6s; transition-timing-function: cubic-bezier(.2, 1.2, .3, 1); }
.reveal-ready .l-stamp[data-r].in { transform: rotate(-4deg) scale(1); }
.l-steps::before { content: ''; position: absolute; left: 22px; right: 22px; top: 48px; height: 3px; border-radius: 2px; background: var(--accent); transform-origin: left; z-index: 0; }
.l-steps li { position: relative; z-index: 1; }
.reveal-ready .l-steps::before { transform: scaleX(0); transition: transform 1.6s .4s cubic-bezier(.3, .7, .2, 1); }
.reveal-ready .l-steps.in::before { transform: scaleX(1); }
.reveal-ready .l-cell-final .d { animation: none; opacity: 0; transform: scale(0); }
.reveal-ready .l-cell-final.in .d { animation: dot-in .7s cubic-bezier(.2, .9, .3, 1.4) both; }
.l-section h2 .w { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .reveal-ready [data-r] { opacity: 1 !important; transform: none !important; transition: none !important; } .l-steps::before { transform: none !important; } }

/* Ajustes escolhidos na própria página */
html[data-lsize="1"] { font-size: 112.5%; } html[data-lsize="2"] { font-size: 125%; }
html.l-hc { --bg: #000; --surface: #000; --surface-2: #000; --tint: #1a1a1a; --fg: #fff; --fg-2: #fff; --line: #fff; --line-accent: #fff; --accent: #FFE24A; --accent-fg: #FFE24A; --on-accent: #000; --accent-hover: #fff04a; color-scheme: dark; }
html.l-hc .on-ink { --bg: #000; --surface: #000; --fg: #fff; --fg-2: #fff; --line: #fff; --accent: #FFE24A; --accent-fg: #FFE24A; --on-accent: #000; }
html.l-hc .l-sheet[data-mode="3"] { border-color: #FFE24A; }

@media (prefers-reduced-motion: reduce) {
  .l-chip, .l-cell .d, .l-cell-final .d { animation: none !important; opacity: 1; }
  .l-wave i { animation: none; height: 28px; }
  html { scroll-behavior: auto; }
}