/* Proposta 10 · Grifo — o marca-texto do Nivo como linguagem da página inteira.
   Base fiel ao produto (branco/gray-50, Inter, índigo-600, cartões com borda gray-200) + grifos.
   Todo seletor fica restrito a .lo--grifo; os resets de elemento ficam dentro de .gf-page
   para não tocar na barra de comparação (.nivo-switcher). */

/* ── Tokens e base ───────────────────────────────────────────────── */
.lo--grifo {
  --gf-indigo-50:#eef2ff; --gf-indigo-100:#e0e7ff; --gf-indigo-200:#c7d2fe; --gf-indigo-300:#a5b4fc; --gf-indigo-400:#818cf8;
  --gf-indigo-500:#6366f1; --gf-indigo-600:#4f46e5; --gf-indigo-700:#4338ca; --gf-indigo-800:#3730a3; --gf-indigo-900:#312e81; --gf-indigo-950:#1e1b4b;
  --gf-gray-50:#f9fafb; --gf-gray-100:#f3f4f6; --gf-gray-200:#e5e7eb; --gf-gray-300:#d1d5db; --gf-gray-400:#9ca3af;
  --gf-gray-500:#6b7280; --gf-gray-600:#4b5563; --gf-gray-700:#374151; --gf-gray-900:#111827;
  /* Tintas de marca-texto (R G B) */
  --gf-lilac:206 147 255; --gf-yellow:253 224 71; --gf-mint:110 231 183; --gf-pink:249 168 212; --gf-sky:125 211 252;
  --gf-green:134 239 172; --gf-rose:253 164 175;
  /* Papéis (redefinidos no modo escuro) */
  --gf-bg:#fff; --gf-surface:#fff; --gf-accent:var(--gf-indigo-600); --gf-accent-strong:var(--gf-indigo-700); --gf-accent-ink:var(--gf-indigo-900);
  --gf-dot:#e2e8f0; --gf-nav-bg:rgb(255 255 255 / .82); --gf-hl-ink:#1e1b4b;
  --gf-ok-bg:#f0fdf4; --gf-ok-line:#86efac; --gf-ok-text:#14532d; --gf-bad-bg:#fff1f2; --gf-bad-line:#fda4af; --gf-bad-text:#881337;
  --gf-note-bg:#fffbeb; --gf-note-line:#fde68a; --gf-note-text:#78350f; --gf-note-strong:#713f12;
  --gf-hero-top:rgb(238 242 255 / .7); --gf-halo:radial-gradient(closest-side, #e0e7ff 0%, rgb(224 231 255 / .55) 46%, rgb(224 231 255 / 0) 100%);
  --gf-ease:cubic-bezier(.65,0,.25,1);
  --gf-shadow-sm:0 1px 2px rgb(17 24 39 / .05);
  --gf-shadow-md:0 1px 2px rgb(17 24 39 / .04), 0 10px 24px -10px rgb(49 46 129 / .16);
  --gf-shadow-xl:0 2px 4px rgb(17 24 39 / .04), 0 28px 56px -20px rgb(79 70 229 / .30), 0 12px 24px -14px rgb(49 46 129 / .14);
  margin:0; background:var(--gf-bg); color:var(--gf-gray-600);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip;
}
.lo--grifo .gf-page { font-feature-settings:'cv11','ss03'; }
.lo--grifo .gf-page *, .lo--grifo .gf-page *::before, .lo--grifo .gf-page *::after { box-sizing:border-box; }
.lo--grifo .gf-page :where(h1,h2,h3,h4,p,ul) { margin:0; }
.lo--grifo .gf-page :where(ul) { padding:0; list-style:none; }
.lo--grifo .gf-page :where(a) { color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
.lo--grifo .gf-page :where(button) { font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.lo--grifo .gf-page :where(button:disabled) { cursor:default; }
.lo--grifo .gf-page :where(i,em) { font-style:normal; }
.lo--grifo .gf-page [hidden] { display:none !important; }
.lo--grifo .gf-page :where(a,button,summary,[tabindex]):focus-visible { outline:3px solid var(--gf-focus,#4f46e5); outline-offset:3px; border-radius:10px; }
.lo--grifo .gf-page .inline-block { display:inline-block; flex:none; vertical-align:middle; }
.lo--grifo .gf-page .inline-block > svg { display:block; width:100%; height:100%; stroke-width:1.8; }
.lo--grifo .gf-page main > section[id] { scroll-margin-top:72px; }
.lo--grifo .gf-wrap { width:min(1180px,calc(100% - 64px)); margin-inline:auto; }
.lo--grifo .gf-skip { position:fixed; top:-120px; left:16px; z-index:80; padding:12px 18px; font-size:15px; font-weight:600; color:#fff; background:var(--gf-indigo-600); border-radius:12px; box-shadow:var(--gf-shadow-xl); }
.lo--grifo .gf-skip:focus { top:16px; }
.lo--grifo .gf-page :where(p) { text-wrap:pretty; }
.lo--grifo .gf-page :where(h1,h2,h3,h4) { color:var(--gf-gray-900); font-weight:800; letter-spacing:-.03em; text-wrap:balance; }
.lo--grifo .gf-page h1 { font-size:clamp(40px,5.3vw,68px); line-height:1.04; letter-spacing:-.045em; }
.lo--grifo .gf-page h2 { font-size:clamp(32px,4.3vw,58px); line-height:1.06; letter-spacing:-.04em; }

/* ── O grifo ─────────────────────────────────────────────────────── */
/* Traço atrás de uma palavra-chave: inclinado (skewY -2deg), 80% da altura, tinta a ~56%,
   com as pontas um pouco mais carregadas, como caneta de verdade. */
.lo--grifo .gf-hl { --hl:var(--gf-lilac); --hl-a:.56; --hl-a2:.74; position:relative; z-index:0; display:inline-block; white-space:nowrap; }
.lo--grifo .gf-hl::before { content:''; position:absolute; z-index:-1; top:15%; left:-.14em; right:-.14em; height:80%;
  background:linear-gradient(90deg, rgb(var(--hl) / var(--hl-a2)) 0, rgb(var(--hl) / var(--hl-a)) .4em, rgb(var(--hl) / var(--hl-a)) calc(100% - .34em), rgb(var(--hl) / var(--hl-a2)) 100%);
  border-radius:.14em .42em .2em .36em / .4em .16em .42em .2em; transform:skewY(-2deg); transform-origin:0 50%; }
.lo--grifo .gf-hl--yellow { --hl:var(--gf-yellow); --hl-a:.62; --hl-a2:.82; }
.lo--grifo .gf-hl--mint { --hl:var(--gf-mint); }
.lo--grifo .gf-hl--pink { --hl:var(--gf-pink); --hl-a:.6; }
.lo--grifo .gf-hl--sky { --hl:var(--gf-sky); }
.lo--grifo .gf-hl--glow { --hl-a:.4; --hl-a2:.54; }
.lo--grifo .gf-hl--glow::before { box-shadow:0 0 38px rgb(var(--hl) / .28); }
.lo--grifo .gf-hl--glow.gf-hl--yellow { --hl-a:.96; --hl-a2:1; color:var(--gf-indigo-950); }
.lo--grifo .gf-hl--glow.gf-hl--yellow::before { box-shadow:0 0 44px rgb(var(--hl) / .35); }

/* Traços soltos em SVG */
.lo--grifo .gf-mark { --hl:var(--gf-lilac); position:absolute; display:block; overflow:visible; pointer-events:none; }
.lo--grifo .gf-mark path { fill:none; stroke:rgb(var(--hl) / .62); stroke-width:9; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:0; }
.lo--grifo .gf-mark--scribble path { stroke-width:30; stroke:rgb(var(--hl) / .5); }
.lo--grifo .gf-mark--ticks path { stroke-width:8; }
.lo--grifo .gf-mark--arrow path { stroke-width:6; }

/* Caneta: a tinta acompanha o grifo que ela está passando */
.lo--grifo .gf-pen-tip { fill:var(--gf-pen-ink,#ce93ff); stroke:var(--gf-pen-edge,#a855f7); }
.lo--grifo .gf-pen-ink { fill:var(--gf-pen-ink,#ce93ff); }
.lo--grifo .gf-stack-pen { --gf-pen-ink:#4ade80; --gf-pen-edge:#16a34a; }

/* Faixas largas de marca-texto cruzando as seções */
.lo--grifo .gf-band { --hl:var(--gf-lilac); --a:.3; position:absolute; z-index:0; display:block; pointer-events:none; background:linear-gradient(90deg, rgb(var(--hl) / calc(var(--a) + .1)) 0, rgb(var(--hl) / var(--a)) 6%, rgb(var(--hl) / var(--a)) 95%, rgb(var(--hl) / calc(var(--a) + .08)) 100%); border-radius:34px 90px 46px 80px / 80px 38px 90px 44px; transform:rotate(var(--r,-4deg)); transform-origin:0 50%; }

/* Tons para chips e ícones */
.lo--grifo .gf-tint--lilac { background:rgb(var(--gf-lilac) / .32); color:#581c87; }
.lo--grifo .gf-tint--yellow { background:rgb(var(--gf-yellow) / .5); color:#713f12; }
.lo--grifo .gf-tint--mint { background:rgb(var(--gf-mint) / .4); color:#065f46; }

/* ── Peças de interface ──────────────────────────────────────────── */
.lo--grifo .gf-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:0 22px; font-size:15.5px; font-weight:600; line-height:1.2; letter-spacing:-.005em; white-space:nowrap; color:#fff; background:var(--gf-indigo-600); border:1px solid transparent; border-radius:12px; box-shadow:inset 0 1px 0 rgb(255 255 255 / .18), 0 1px 2px rgb(49 46 129 / .3), 0 10px 22px -8px rgb(79 70 229 / .55); transition:transform .16s ease, box-shadow .2s ease, background-color .16s ease, border-color .16s ease; }
.lo--grifo .gf-btn > .inline-block { transition:transform .2s ease; }
.lo--grifo .gf-btn:hover { background:var(--gf-indigo-700); transform:translateY(-2px); box-shadow:inset 0 1px 0 rgb(255 255 255 / .18), 0 2px 4px rgb(49 46 129 / .3), 0 16px 30px -10px rgb(79 70 229 / .6); }
.lo--grifo .gf-btn:hover > .inline-block:last-child { transform:translateX(3px); }
.lo--grifo .gf-btn:active { transform:translateY(1px) scale(.985); box-shadow:inset 0 2px 4px rgb(30 27 75 / .3), 0 1px 2px rgb(49 46 129 / .3); }
.lo--grifo .gf-btn--lg { min-height:58px; padding:0 28px; font-size:17px; font-weight:700; border-radius:14px; }
.lo--grifo .gf-btn--md { min-height:46px; padding:0 20px; font-size:15px; }
.lo--grifo .gf-btn--sm { min-height:40px; padding:0 16px; font-size:14px; border-radius:10px; }
.lo--grifo .gf-btn--ghost { color:var(--gf-accent-strong); background:var(--gf-surface); border-color:var(--gf-gray-200); box-shadow:var(--gf-shadow-sm); }
.lo--grifo .gf-btn--ghost:hover { background:var(--gf-indigo-50); border-color:var(--gf-indigo-200); box-shadow:0 1px 2px rgb(17 24 39 / .05), 0 10px 22px -12px rgb(79 70 229 / .35); }
.lo--grifo .gf-btn--ghost:active { box-shadow:inset 0 2px 4px rgb(49 46 129 / .12); }
.lo--grifo .gf-btn--white { color:var(--gf-indigo-700); background:#fff; box-shadow:0 1px 2px rgb(30 27 75 / .3), 0 12px 26px -10px rgb(30 27 75 / .6); }
.lo--grifo .gf-btn--white:hover { background:var(--gf-indigo-50); box-shadow:0 2px 4px rgb(30 27 75 / .3), 0 18px 32px -12px rgb(30 27 75 / .7); }

.lo--grifo .gf-pill { display:inline-flex; align-items:center; gap:8px; padding:7px 15px 7px 12px; font-size:14px; font-weight:600; line-height:1.3; color:var(--gf-accent-strong); background:var(--gf-indigo-100); border-radius:999px; }
.lo--grifo .gf-eyebrow { display:inline-flex; align-items:center; gap:12px; font-size:13px; font-weight:700; line-height:1.3; letter-spacing:.08em; text-transform:uppercase; color:var(--gf-accent); }
.lo--grifo .gf-eyebrow::before { content:''; flex:none; width:28px; height:11px; background:rgb(var(--gf-lilac) / .8); border-radius:3px 7px 4px 8px / 6px 3px 7px 4px; transform:skewY(-9deg); }
.lo--grifo .gf-level { display:inline-grid; place-items:center; flex:none; min-width:30px; padding:2px 8px; font-size:12px; font-weight:700; line-height:1.4; letter-spacing:.02em; color:var(--gf-accent-strong); background:var(--gf-indigo-50); border:1px solid var(--gf-indigo-200); border-radius:999px; }
.lo--grifo .gf-ai-chip { display:inline-flex; align-items:center; gap:6px; flex:none; padding:5px 11px 5px 9px; font-size:12.5px; font-weight:600; line-height:1.3; white-space:nowrap; color:#6b21a8; background:rgb(var(--gf-lilac) / .22); border:1px solid rgb(var(--gf-lilac) / .7); border-radius:999px; }
.lo--grifo .gf-dots { display:inline-flex; gap:6px; flex:none; }
.lo--grifo .gf-dots i { width:11px; height:11px; border-radius:50%; background:#f87171; }
.lo--grifo .gf-dots i:nth-child(2) { background:#facc15; }
.lo--grifo .gf-dots i:nth-child(3) { background:#4ade80; }
.lo--grifo .gf-small-label { display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gf-gray-500); }
.lo--grifo .gf-caption-check { display:inline-grid; place-items:center; flex:none; width:20px; height:20px; color:#166534; background:rgb(var(--gf-green) / .6); border-radius:50%; }
.lo--grifo .gf-caption-check svg { stroke-width:2.6 !important; }
.lo--grifo .gf-live-dot { display:inline-block; flex:none; width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgb(34 197 94 / .2); }

/* ── Navegação ───────────────────────────────────────────────────── */
.lo--grifo .gf-nav { position:sticky; top:0; z-index:40; background:var(--gf-nav-bg); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--gf-gray-100); }
.lo--grifo .gf-nav-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:68px; }
.lo--grifo .gf-logo { display:inline-flex; padding:2px 6px; font-size:25px; font-weight:800; letter-spacing:-.035em; line-height:1.15; color:var(--gf-gray-900); }
.lo--grifo .gf-logo .gf-hl::before { left:-.22em; right:-.22em; transition:transform .3s var(--gf-ease); }
.lo--grifo .gf-logo:hover .gf-hl::before { transform:skewY(-4deg) scaleX(1.06); }
.lo--grifo .gf-nav-links { display:flex; gap:6px; font-size:15px; font-weight:500; color:var(--gf-gray-600); }
.lo--grifo .gf-nav-links a { padding:9px 12px; transition:color .15s; }
.lo--grifo .gf-nav-links a > span { position:relative; z-index:0; }
.lo--grifo .gf-nav-links a > span::before { content:''; position:absolute; z-index:-1; inset:18% -6px 4%; background:rgb(var(--gf-lilac) / .5); border-radius:3px 8px 4px 7px / 7px 3px 8px 4px; transform:skewY(-2deg) scaleX(0); transform-origin:0 50%; transition:transform .28s var(--gf-ease); }
.lo--grifo .gf-nav-links a:hover { color:var(--gf-gray-900); }
.lo--grifo .gf-nav-links a:hover > span::before, .lo--grifo .gf-nav-links a:focus-visible > span::before { transform:skewY(-2deg) scaleX(1); }
.lo--grifo .gf-nav-actions { display:flex; align-items:center; gap:4px; }
.lo--grifo .gf-nav-login { padding:9px 12px; font-size:15px; font-weight:600; color:var(--gf-gray-700); background:transparent; border:0; border-radius:10px; transition:color .15s, background-color .15s; }
.lo--grifo .gf-nav-login:hover { color:var(--gf-accent-strong); background:var(--gf-indigo-50); }
.lo--grifo .gf-nav-logout { display:inline-flex; margin:0; }
.lo--grifo .gf-nav-divider { flex:none; width:1px; height:22px; margin-inline:8px 6px; background:var(--gf-gray-200); }
.lo--grifo .gf-nav-icon { display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:none; min-width:40px; height:40px; padding:0 9px; font-size:13px; font-weight:700; letter-spacing:.03em; color:var(--gf-gray-600); background:transparent; border:0; border-radius:10px; transition:color .15s, background-color .15s, transform .15s; }
.lo--grifo .gf-nav-icon:hover { color:var(--gf-accent-strong); background:var(--gf-indigo-50); }
.lo--grifo .gf-nav-icon:active { transform:scale(.94); }
.lo--grifo .gf-theme-toggle svg { display:block; width:20px; height:20px; }
.lo--grifo .gf-page .hidden { display:none !important; }
/* Idioma */
.lo--grifo .gf-lang { position:relative; }
.lo--grifo .gf-lang-chevron { display:inline-flex; margin-left:-2px; transition:transform .2s ease; }
.lo--grifo .gf-lang-button[aria-expanded=true] { color:var(--gf-accent-strong); background:var(--gf-indigo-50); }
.lo--grifo .gf-lang-button[aria-expanded=true] .gf-lang-chevron { transform:rotate(180deg); }
.lo--grifo .gf-lang-menu { position:absolute; z-index:5; top:calc(100% + 10px); right:0; min-width:198px; padding:6px; background:var(--gf-surface); border:1px solid var(--gf-gray-200); border-radius:14px; box-shadow:var(--gf-shadow-xl); transform-origin:100% 0; }
.lo--grifo .gf-lang-form, .lo--grifo .gf-menu-lang-form, .lo--grifo .gf-menu-logout { margin:0; }
.lo--grifo .gf-lang-item { display:flex; align-items:center; gap:11px; width:100%; min-height:42px; padding:0 10px; font-size:14.5px; font-weight:500; text-align:left; color:var(--gf-gray-700); background:transparent; border:0; border-radius:9px; transition:background-color .12s, color .12s; }
.lo--grifo .gf-lang-item:hover { color:var(--gf-accent-strong); background:var(--gf-indigo-50); }
.lo--grifo .gf-lang-code { display:inline-grid; place-items:center; flex:none; min-width:32px; padding:3px 6px; font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--gf-gray-600); background:var(--gf-gray-100); border-radius:6px; }
.lo--grifo .gf-lang-item[aria-current=true] { font-weight:700; color:var(--gf-gray-900); }
.lo--grifo .gf-lang-item[aria-current=true] .gf-lang-code { color:var(--gf-hl-ink); background:rgb(var(--gf-lilac) / .75); border-radius:4px 9px 5px 8px / 8px 4px 9px 5px; transform:skewY(-4deg); }
.lo--grifo .gf-lang-check { display:inline-flex; margin-left:auto; color:var(--gf-accent); }
.lo--grifo .gf-lang-check svg { stroke-width:2.6 !important; }
/* Menu mobile */
.lo--grifo .gf-burger { display:none; color:var(--gf-gray-700); }
.lo--grifo .gf-burger > span { display:inline-flex; }
.lo--grifo .gf-burger .gf-burger-close, .lo--grifo .gf-burger[aria-expanded=true] .gf-burger-open { display:none; }
.lo--grifo .gf-burger[aria-expanded=true] .gf-burger-close { display:inline-flex; }
.lo--grifo .gf-menu { position:absolute; top:100%; left:0; right:0; max-height:calc(100vh - 60px); max-height:calc(100dvh - 60px); overflow-y:auto; overscroll-behavior:contain; background:var(--gf-surface); border-bottom:1px solid var(--gf-gray-200); box-shadow:0 30px 50px -24px rgb(17 24 39 / .35); }
.lo--grifo .gf-menu-inner { display:flex; flex-direction:column; gap:18px; padding-block:6px 22px; }
.lo--grifo .gf-menu-links { display:flex; flex-direction:column; }
.lo--grifo .gf-menu-links a { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; padding:0 2px; font-size:19px; font-weight:700; letter-spacing:-.02em; color:var(--gf-gray-900); border-bottom:1px solid var(--gf-gray-100); }
.lo--grifo .gf-menu-links a > .inline-block { color:var(--gf-gray-400); transition:transform .2s ease, color .2s; }
.lo--grifo .gf-menu-links a > span:first-child { position:relative; z-index:0; }
.lo--grifo .gf-menu-links a > span:first-child::before { content:''; position:absolute; z-index:-1; inset:16% -6px 4%; background:rgb(var(--gf-lilac) / .5); border-radius:3px 8px 4px 7px / 7px 3px 8px 4px; transform:skewY(-2deg) scaleX(0); transform-origin:0 50%; transition:transform .28s var(--gf-ease); }
.lo--grifo .gf-menu-links a:nth-child(2) > span:first-child::before { background:rgb(var(--gf-yellow) / .6); }
.lo--grifo .gf-menu-links a:nth-child(3) > span:first-child::before { background:rgb(var(--gf-mint) / .55); }
.lo--grifo .gf-menu-links a:nth-child(4) > span:first-child::before { background:rgb(var(--gf-sky) / .55); }
.lo--grifo .gf-menu-links a:hover > span:first-child::before, .lo--grifo .gf-menu-links a:focus-visible > span:first-child::before, .lo--grifo .gf-menu-links a:active > span:first-child::before { transform:skewY(-2deg) scaleX(1); }
.lo--grifo .gf-menu-links a:hover > .inline-block { color:var(--gf-accent); transform:translateX(4px); }
.lo--grifo .gf-menu-lang { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:4px; background:var(--gf-gray-100); border-radius:14px; }
.lo--grifo .gf-menu-lang-item { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; min-height:44px; font-size:14px; font-weight:700; letter-spacing:.04em; color:var(--gf-gray-600); background:transparent; border:0; border-radius:10px; transition:background-color .15s, color .15s; }
.lo--grifo .gf-menu-lang-item:hover { color:var(--gf-gray-900); }
.lo--grifo .gf-menu-lang-item[aria-current=true] { color:var(--gf-accent-strong); background:var(--gf-surface); box-shadow:0 1px 2px rgb(17 24 39 / .12), 0 2px 6px -2px rgb(49 46 129 / .2); }
.lo--grifo .gf-menu-auth { display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:10px; }
.lo--grifo .gf-menu-auth .gf-btn { width:100%; min-height:52px; padding-inline:10px; font-size:15px; gap:7px; }
.lo--grifo .gf-only-narrow { display:none; }

/* ── 1 · Hero ────────────────────────────────────────────────────── */
.lo--grifo .gf-hero { position:relative; padding:72px 0 104px; background:linear-gradient(180deg, var(--gf-hero-top) 0%, var(--gf-bg) 62%); overflow:clip; }
.lo--grifo .gf-hero-halo { position:absolute; top:-6%; right:-8%; width:min(880px,70vw); aspect-ratio:1; background:var(--gf-halo); pointer-events:none; }
.lo--grifo .gf-hero-grid { position:relative; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); align-items:center; gap:48px; }
.lo--grifo .gf-hero h1 { margin-top:26px; }
.lo--grifo .gf-lead { max-width:31em; margin-top:28px; font-size:clamp(17px,1.45vw,20px); line-height:1.65; color:var(--gf-gray-600); }
.lo--grifo .gf-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
.lo--grifo .gf-caption { display:flex; align-items:center; gap:9px; margin-top:22px; font-size:14.5px; font-weight:500; color:var(--gf-gray-500); }

/* Composição: tudo em em, escalando com a largura do container */
.lo--grifo .gf-stack { container-type:inline-size; width:100%; max-width:620px; margin-inline:auto; }
.lo--grifo .gf-stack-inner { position:relative; aspect-ratio:1/1.02; font-size:14px; font-size:2.62cqw; line-height:1.4; color:var(--gf-gray-700); }
.lo--grifo .gf-stack-inner > * { position:absolute; }
.lo--grifo .gf-stack .inline-block { width:1.1em !important; height:1.1em !important; }
.lo--grifo .gf-stack-band { height:5.4em; border-radius:1.4em 3.6em 1.8em 3.2em / 3em 1.4em 3.4em 1.6em; transform-origin:0 50%; }
.lo--grifo .gf-stack-band--lilac { left:-5%; top:27%; width:112%; background:rgb(var(--gf-lilac) / .4); transform:rotate(-9deg); }
.lo--grifo .gf-stack-band--yellow { left:22%; top:76%; width:80%; height:4.2em; background:rgb(var(--gf-yellow) / .55); transform:rotate(-6deg); }
.lo--grifo .gf-stack-ticks { width:4.4em; right:-7%; top:-8%; transform:rotate(30deg); --hl:var(--gf-yellow); }
.lo--grifo .gf-stack-cursor { position:absolute; right:12%; bottom:-.9em; width:1.9em; height:auto; filter:drop-shadow(0 .3em .4em rgb(17 24 39 / .3)); }
.lo--grifo .gf-stack-ticks path { stroke:rgb(var(--hl) / .95); }

.lo--grifo .gf-mini { display:flex; flex-direction:column; padding:1.15em 1.2em 1.25em; background:var(--gf-surface); border:1px solid var(--gf-gray-200); border-radius:1.15em; box-shadow:var(--gf-shadow-xl); }
.lo--grifo .gf-mini-head { display:flex; align-items:center; gap:.7em; padding-bottom:.85em; margin-bottom:.9em; border-bottom:1px solid var(--gf-gray-100); }
.lo--grifo .gf-mini-icon { display:grid; place-items:center; flex:none; width:2.2em; height:2.2em; border-radius:.65em; }
.lo--grifo .gf-mini-icon--lilac { background:rgb(var(--gf-lilac) / .32); color:#581c87; }
.lo--grifo .gf-mini-icon--yellow { background:rgb(var(--gf-yellow) / .5); color:#713f12; }
.lo--grifo .gf-mini-icon--mint { background:rgb(var(--gf-mint) / .4); color:#065f46; }
.lo--grifo .gf-mini-title { flex:1; min-width:0; font-size:.95em; font-weight:700; line-height:1.25; letter-spacing:-.01em; color:var(--gf-gray-900); }
.lo--grifo .gf-mini-title small { display:block; font-size:.8em; font-weight:500; letter-spacing:0; color:var(--gf-gray-500); }
.lo--grifo .gf-stack .gf-level { min-width:0; padding:.12em .65em; font-size:.78em; }
.lo--grifo .gf-mini-kicker { font-size:.66em; font-weight:700; letter-spacing:.1em; color:var(--gf-gray-400); }
.lo--grifo .gf-mini-q { margin:.3em 0 .75em; font-size:1.3em; font-weight:800; line-height:1.2; letter-spacing:-.025em; color:var(--gf-gray-900); }
.lo--grifo .gf-mini-opt { display:flex; align-items:center; gap:.7em; padding:.55em .65em; font-size:.92em; font-weight:500; background:var(--gf-surface); border:1px solid var(--gf-gray-200); border-radius:.8em; }
.lo--grifo .gf-mini-opt + .gf-mini-opt { margin-top:.5em; }
.lo--grifo .gf-mini-opt > i { display:grid; place-items:center; flex:none; width:1.9em; height:1.9em; font-size:.84em; font-weight:700; color:var(--gf-gray-600); background:var(--gf-gray-100); border-radius:.5em; }
.lo--grifo .gf-mini-opt--right { position:relative; z-index:2; color:var(--gf-gray-900); font-weight:600; background:var(--gf-ok-bg); border-color:var(--gf-ok-line); }
.lo--grifo .gf-mini-opt--right > i { color:#fff; background:#16a34a; }
.lo--grifo .gf-mini-opt--right > i svg { stroke-width:3 !important; }
.lo--grifo .gf-mini-stroke { position:relative; z-index:0; white-space:nowrap; }
.lo--grifo .gf-mini-stroke::before { content:''; position:absolute; z-index:-1; inset:8% -.3em 2% -.3em; background:linear-gradient(90deg, rgb(var(--gf-green) / .9) 0, rgb(var(--gf-green) / .7) .4em, rgb(var(--gf-green) / .7) 100%); border-radius:.2em .5em .25em .45em / .5em .2em .5em .25em; transform:skewY(-2deg); transform-origin:0 50%; }
.lo--grifo .gf-stack-pen { position:absolute; z-index:3; left:calc(100% + .3em); top:55%; width:12.6em; height:auto; margin:-1.9em 0 0 -.76em; transform:rotate(28deg); transform-origin:6% 52%; filter:drop-shadow(0 .7em .7em rgb(49 46 129 / .28)); }

.lo--grifo .gf-mini--quiz { z-index:3; left:2%; top:16%; width:61%; transform:rotate(-3deg); }
.lo--grifo .gf-mini--card { z-index:2; right:-1%; top:0; width:36%; align-items:center; padding:1.3em 1em 1.2em; text-align:center; transform:rotate(6deg); }
.lo--grifo .gf-mini--card strong { margin:.45em 0 .3em; font-size:2.1em; font-weight:800; line-height:1.1; letter-spacing:-.04em; color:var(--gf-gray-900); }
.lo--grifo .gf-mini--card em { font-size:.82em; line-height:1.4; color:var(--gf-gray-500); }
.lo--grifo .gf-mini-hint { display:inline-flex; align-items:center; gap:.4em; margin-top:.9em; padding:.3em .8em; font-size:.7em; font-weight:600; color:var(--gf-accent-strong); background:var(--gf-indigo-50); border-radius:999px; }
.lo--grifo .gf-mini--gap { z-index:4; left:0; top:70%; width:61%; transform:rotate(2.2deg); }
.lo--grifo .gf-mini--gap p { font-size:.98em; font-weight:500; line-height:2; color:var(--gf-gray-700); }
.lo--grifo .gf-mini--gap p .gf-hl { font-weight:700; color:var(--gf-gray-900); }
.lo--grifo .gf-mini-blank { display:inline-block; width:5.4em; height:1.5em; vertical-align:-.35em; background:var(--gf-gray-50); border-bottom:2px dashed var(--gf-gray-300); border-radius:.4em .4em 0 0; }
.lo--grifo .gf-mini-words { display:flex; flex-wrap:wrap; gap:.45em; margin-top:.7em; }
.lo--grifo .gf-mini-words b { padding:.25em .75em; font-size:.8em; font-weight:600; color:var(--gf-gray-700); background:var(--gf-surface); border:1px solid var(--gf-gray-200); border-radius:.6em; box-shadow:var(--gf-shadow-sm); }
.lo--grifo .gf-mini-words b.is-used { color:var(--gf-gray-400); text-decoration:line-through; background:var(--gf-gray-50); box-shadow:none; }

.lo--grifo .gf-float { display:inline-flex; align-items:center; gap:.5em; font-weight:600; background:var(--gf-surface); border:1px solid var(--gf-gray-200); box-shadow:var(--gf-shadow-xl); }
.lo--grifo .gf-float--ai { z-index:5; left:0; top:6.5%; padding:.55em 1em .55em .8em; font-size:.92em; color:#6b21a8; border-color:rgb(var(--gf-lilac) / .8); border-radius:999px; transform:rotate(-5deg); }
.lo--grifo .gf-float--aha { z-index:5; right:3%; top:40%; gap:.55em; padding:.5em 1.05em .5em .5em; font-size:1.25em; font-weight:800; letter-spacing:-.02em; color:#fff; background:var(--gf-indigo-600); border-color:var(--gf-indigo-600); border-radius:1.4em 1.4em 1.4em .35em; transform:rotate(4deg); box-shadow:0 1em 2em -.6em rgb(79 70 229 / .6); }
.lo--grifo .gf-float--aha i { display:grid; place-items:center; width:1.7em; height:1.7em; font-size:.68em; font-weight:700; color:var(--gf-accent-strong); background:var(--gf-indigo-100); border-radius:50%; }
.lo--grifo .gf-float--lesson { z-index:5; right:0; top:83%; width:37%; display:flex; flex-wrap:wrap; gap:.6em; padding:.8em .9em .9em; border-radius:1em; transform:rotate(-2deg); }
.lo--grifo .gf-float--lesson .gf-mini-title { font-size:.84em; }
.lo--grifo .gf-float-bar { flex:0 0 100%; height:.45em; background:var(--gf-gray-100); border-radius:999px; overflow:hidden; }
.lo--grifo .gf-float-bar i { display:block; width:66%; height:100%; background:linear-gradient(90deg, var(--gf-indigo-500), var(--gf-indigo-600)); border-radius:inherit; }

/* ── 2 · Demonstração ────────────────────────────────────────────── */
.lo--grifo .gf-demo { position:relative; padding:104px 0 112px; background-color:var(--gf-gray-50); background-image:radial-gradient(var(--gf-dot) 1.4px, transparent 1.5px); background-size:24px 24px; border-block:1px solid var(--gf-gray-100); overflow:clip; }
.lo--grifo .gf-band--demo { --hl:var(--gf-yellow); --a:.4; --r:-3deg; left:-4%; top:322px; width:64%; height:96px; }
.lo--grifo .gf-demo .gf-wrap { position:relative; z-index:1; }
.lo--grifo .gf-heading { position:relative; display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); align-items:end; gap:48px; margin-bottom:52px; }
.lo--grifo .gf-heading h2 { margin-top:18px; }
.lo--grifo .gf-heading-side { position:relative; max-width:25em; padding-bottom:6px; font-size:18px; line-height:1.65; color:var(--gf-gray-600); }
.lo--grifo .gf-heading--center { display:flex; flex-direction:column; align-items:center; gap:0; text-align:center; }
.lo--grifo .gf-heading--center .gf-heading-side { max-width:31em; margin-top:22px; padding:0; }
.lo--grifo .gf-demo-arrow { width:78px; left:-112px; bottom:-40px; --hl:var(--gf-lilac); transform:rotate(38deg); }
.lo--grifo .gf-demo-arrow path { stroke:rgb(var(--hl) / .95); }

.lo--grifo .gf-lab { position:relative; background:var(--gf-surface); border:1px solid var(--gf-gray-200); border-radius:22px; box-shadow:0 2px 4px rgb(17 24 39 / .04), 0 40px 80px -28px rgb(79 70 229 / .32), 0 18px 36px -18px rgb(49 46 129 / .16); overflow:hidden; }
.lo--grifo .gf-noscript { padding:14px 22px; font-size:15px; font-weight:600; color:var(--gf-note-text); background:var(--gf-note-bg); border-bottom:1px solid var(--gf-note-line); }
.lo--grifo .gf-lab-chrome { display:flex; align-items:center; gap:16px; padding:12px 18px; background:var(--gf-gray-50); border-bottom:1px solid var(--gf-gray-100); }
.lo--grifo .gf-lab-url { display:flex; align-items:center; gap:7px; flex:1; min-width:0; max-width:420px; padding:5px 14px; font-size:12.5px; line-height:1.4; color:var(--gf-gray-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:var(--gf-surface); border:1px solid var(--gf-gray-200); border-radius:999px; }
.lo--grifo .gf-lab-url .inline-block { color:#16a34a; }
.lo--grifo .gf-lab-badge { display:inline-flex; align-items:center; gap:8px; margin-left:auto; padding:5px 12px; font-size:12px; font-weight:600; white-space:nowrap; color:var(--gf-gray-700); background:var(--gf-surface); border:1px solid var(--gf-gray-200); border-radius:999px; }
.lo--grifo .gf-lab-head { display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; padding:20px 24px; border-bottom:1px solid var(--gf-gray-100); }
.lo--grifo .gf-lesson { display:flex; align-items:center; gap:14px; min-width:0; }
.lo--grifo .gf-lesson-icon { display:grid; place-items:center; flex:none; width:46px; height:46px; color:#fff; background:var(--gf-indigo-600); border-radius:14px; box-shadow:0 8px 16px -8px rgb(79 70 229 / .6); }
.lo--grifo .gf-lesson strong { display:block; font-size:19px; font-weight:800; line-height:1.2; letter-spacing:-.025em; color:var(--gf-gray-900); }
.lo--grifo .gf-lesson-meta { display:flex; align-items:center; gap:8px; margin-top:4px; font-size:13.5px; font-weight:500; color:var(--gf-gray-500); }
.lo--grifo .gf-lesson-meta > span:not(.gf-level) + span:not(.gf-level)::before { content:'·'; margin-right:8px; }
.lo--grifo .gf-lab-tools { display:flex; align-items:center; gap:10px; }
.lo--grifo .gf-role-switch { display:flex; gap:2px; padding:3px; background:var(--gf-gray-100); border-radius:12px; }
.lo--grifo .gf-role-switch button { min-height:38px; padding:0 16px; font-size:14px; font-weight:600; color:var(--gf-gray-600); background:transparent; border:0; border-radius:9px; transition:background-color .15s, color .15s, box-shadow .15s; }
.lo--grifo .gf-role-switch button:hover { color:var(--gf-gray-900); }
.lo--grifo .gf-role-switch button[aria-pressed=true] { color:var(--gf-accent-strong); background:var(--gf-surface); box-shadow:0 1px 2px rgb(17 24 39 / .1), 0 2px 6px -2px rgb(49 46 129 / .2); }
.lo--grifo .gf-restart { white-space:nowrap; min-height:44px; padding:0 14px; font-size:14px; font-weight:600; color:var(--gf-gray-700); background:var(--gf-surface); border:1px solid var(--gf-gray-200); border-radius:12px; box-shadow:var(--gf-shadow-sm); transition:background-color .15s, border-color .15s, transform .15s; }
.lo--grifo .gf-restart > span { display:inline-block; transition:transform .4s var(--gf-ease); }
.lo--grifo .gf-restart:hover { background:var(--gf-gray-50); border-color:var(--gf-gray-300); }
.lo--grifo .gf-restart:hover > span { transform:rotate(180deg); }
.lo--grifo .gf-restart:active { transform:scale(.97); }

.lo--grifo .gf-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:16px 24px; border-bottom:1px solid var(--gf-gray-100); }
.lo--grifo .gf-tab { --hl:var(--gf-lilac); display:flex; align-items:center; gap:12px; min-width:0; min-height:64px; padding:10px 14px; text-align:left; background:var(--gf-surface); border:1px solid var(--gf-gray-200); border-radius:14px; transition:border-color .15s, box-shadow .2s, transform .15s, background-color .15s; }
.lo--grifo .gf-tab--gap { --hl:var(--gf-yellow); }
.lo--grifo .gf-tab--cards { --hl:var(--gf-mint); }
.lo--grifo .gf-tab:hover { border-color:var(--gf-indigo-200); background:var(--gf-gray-50); }
.lo--grifo .gf-tab:active { transform:scale(.985); }
.lo--grifo .gf-tab-icon { display:grid; place-items:center; flex:none; width:40px; height:40px; color:var(--gf-gray-700); background:rgb(var(--hl) / .34); border-radius:11px; }
.lo--grifo .gf-tab-text { flex:1; min-width:0; }
.lo--grifo .gf-tab strong { display:block; font-size:15.5px; font-weight:700; line-height:1.3; letter-spacing:-.01em; color:var(--gf-gray-900); }
.lo--grifo .gf-tab small { display:block; margin-top:1px; font-size:13px; line-height:1.35; color:var(--gf-gray-500); }
.lo--grifo .gf-tab[aria-selected=true] { border-color:var(--gf-indigo-500); background:var(--gf-surface); box-shadow:0 0 0 3px rgb(99 102 241 / .14), 0 8px 18px -10px rgb(79 70 229 / .4); }
.lo--grifo .gf-tab[aria-selected=true] .gf-tab-label { background-size:100% 84%; }

.lo--grifo .gf-stage { padding:24px; background:var(--gf-gray-50); }
.lo--grifo .gf-exercise { --hl:var(--gf-lilac); min-height:456px; padding:28px 30px 30px; background:var(--gf-surface); border:1px solid var(--gf-gray-200); border-radius:18px; box-shadow:var(--gf-shadow-sm); }
.lo--grifo .gf-exercise--gap { --hl:var(--gf-yellow); }
.lo--grifo .gf-exercise--cards { --hl:var(--gf-mint); }
.lo--grifo .gf-exercise-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:20px; border-bottom:1px solid var(--gf-gray-100); }
.lo--grifo .gf-exercise-heading h3 { font-size:21px; line-height:1.25; letter-spacing:-.025em; }
.lo--grifo .gf-exercise-heading p { margin-top:4px; font-size:15px; line-height:1.5; color:var(--gf-gray-500); }

.lo--grifo .gf-quiz-columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:32px; margin-top:24px; }
.lo--grifo .gf-reading { display:flex; flex-direction:column; padding:22px 24px; background:var(--gf-indigo-50); border:1px solid var(--gf-indigo-100); border-radius:16px; }
.lo--grifo .gf-reading .gf-small-label { color:var(--gf-accent-strong); }
.lo--grifo .gf-reading h4 { margin:12px 0; font-size:21px; line-height:1.2; color:var(--gf-accent-ink); }
.lo--grifo .gf-reading > p { margin-bottom:10px; font-size:15.5px; line-height:1.75; color:var(--gf-gray-700); }
.lo--grifo .gf-reading-foot { display:flex; justify-content:space-between; gap:10px; margin-top:auto; padding-top:14px; font-size:12.5px; font-weight:500; color:var(--gf-gray-500); border-top:1px solid var(--gf-indigo-100); }
/* Grifo de várias linhas (fundo por fragmento): usado nas alternativas, nas evidências e no FAQ */
.lo--grifo .gf-evidence, .lo--grifo .gf-tab-label, .lo--grifo .nv-answer > span:last-child, .lo--grifo .gf-faq-q > span, .lo--grifo .gf-flashcard-word, .lo--grifo .gf-profile-name {
  padding:.1em .28em; margin-inline:-.28em; border-radius:.3em .6em .35em .55em / .6em .3em .6em .35em;
  background-image:linear-gradient(rgb(var(--hl) / var(--hl-a,.58)), rgb(var(--hl) / var(--hl-a,.58))); background-repeat:no-repeat; background-position:0 62%; background-size:0% 84%;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; transition:background-size .45s var(--gf-ease), color .2s; }
.lo--grifo .gf-evidence { --hl:var(--gf-yellow); --hl-a:.7; }
.lo--grifo .gf-tab-label { --hl-a:.62; }
.lo--grifo .gf-lab:has([data-role=teacher][aria-pressed=true]) .gf-evidence { background-size:100% 84%; color:var(--gf-gray-900); }

.lo--grifo .gf-question-meta { white-space:nowrap; display:flex; justify-content:space-between; gap:10px; margin-bottom:12px; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gf-gray-500); }
.lo--grifo .gf-question h4 { margin-bottom:16px; font-size:22px; line-height:1.25; }
.lo--grifo .gf-quiz-answers { display:flex; flex-direction:column; gap:10px; }
/* Botões criados pelo controller (classes nv-*) */
.lo--grifo .nv-answer { --hl:var(--gf-lilac); position:relative; display:block; width:100%; min-height:56px; padding:15px 16px 15px 60px; font-size:15.5px; font-weight:500; line-height:1.5; text-align:left; color:var(--gf-gray-700); background:var(--gf-surface); border:1px solid var(--gf-gray-200); border-radius:14px; box-shadow:var(--gf-shadow-sm); transition:border-color .15s, box-shadow .2s, transform .15s, background-color .15s; }
.lo--grifo .nv-answer-letter { position:absolute; left:14px; top:50%; display:grid; place-items:center; width:32px; height:32px; margin-top:-16px; font-size:13px; font-weight:700; color:var(--gf-gray-600); background:var(--gf-gray-100); border-radius:9px; transition:background-color .15s, color .15s; }
.lo--grifo .nv-answer:hover:not(:disabled) { border-color:var(--gf-indigo-300); box-shadow:0 1px 2px rgb(17 24 39 / .05), 0 8px 18px -10px rgb(79 70 229 / .35); transform:translateY(-1px); }
.lo--grifo .nv-answer:active:not(:disabled) { transform:scale(.99); }
.lo--grifo .nv-answer[aria-pressed=true] { color:var(--gf-gray-900); font-weight:600; border-color:var(--gf-indigo-500); box-shadow:0 0 0 3px rgb(99 102 241 / .14); }
.lo--grifo .nv-answer[aria-pressed=true] > span:last-child { background-size:100% 84%; }
.lo--grifo .nv-answer[aria-pressed=true] .nv-answer-letter { color:#fff; background:var(--gf-indigo-600); }
.lo--grifo .nv-answer:disabled { color:var(--gf-gray-500); box-shadow:none; }
.lo--grifo .nv-answer[data-result] { color:var(--gf-gray-900); font-weight:600; }
.lo--grifo .nv-answer[data-result] > span:last-child { background-size:100% 84%; }
.lo--grifo .nv-answer[data-result] .nv-answer-letter { font-size:0; color:#fff; background-repeat:no-repeat; background-position:center; background-size:16px 16px; }
.lo--grifo .nv-answer[data-result=correct] { --hl:var(--gf-green); --hl-a:.75; background:var(--gf-ok-bg); border-color:var(--gf-ok-line); box-shadow:0 0 0 3px rgb(34 197 94 / .12); }
.lo--grifo .nv-answer[data-result=correct] .nv-answer-letter { background-color:#16a34a; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.75l6 6 9-13.5'/%3E%3C/svg%3E"); }
.lo--grifo .nv-answer[data-result=incorrect] { --hl:var(--gf-rose); --hl-a:.7; background:var(--gf-bad-bg); border-color:var(--gf-bad-line); box-shadow:0 0 0 3px rgb(244 63 94 / .1); }
.lo--grifo .nv-answer[data-result=incorrect] .nv-answer-letter { background-color:#e11d48; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E"); }

.lo--grifo .gf-feedback { min-height:50px; margin-block:14px 10px; font-size:15px; font-weight:500; line-height:1.5; color:var(--gf-gray-500); }
.lo--grifo .gf-feedback[data-result] { padding:11px 14px 11px 16px; font-weight:500; border-radius:12px; border-left:4px solid; }
.lo--grifo .gf-feedback[data-result=correct] { color:var(--gf-ok-text); background:var(--gf-ok-bg); border-color:#22c55e; }
.lo--grifo .gf-feedback[data-result=incorrect] { color:var(--gf-bad-text); background:var(--gf-bad-bg); border-color:#fb7185; }
.lo--grifo .gf-quiz-actions { display:flex; justify-content:flex-end; }

.lo--grifo .gf-word-bank { display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px; margin:24px 0 26px; padding:16px 20px; background:var(--gf-gray-50); border:1px dashed var(--gf-gray-300); border-radius:16px; }
.lo--grifo .gf-word-bank > div { display:flex; flex-wrap:wrap; gap:10px; }
.lo--grifo .gf-word { position:relative; z-index:0; min-height:44px; padding:0 18px; font-size:16px; font-weight:600; color:var(--gf-gray-900); background:var(--gf-surface); border:1px solid var(--gf-gray-200); border-radius:12px; box-shadow:0 1px 2px rgb(17 24 39 / .06), 0 2px 0 var(--gf-gray-200); transition:transform .15s, box-shadow .15s, border-color .15s, color .15s; }
.lo--grifo .gf-word::before { content:''; position:absolute; z-index:-1; inset:24% 10px 20%; background:rgb(var(--gf-yellow) / .7); border-radius:3px 8px 4px 7px / 7px 3px 8px 4px; transform:skewY(-2deg) scaleX(0); transform-origin:0 50%; transition:transform .3s var(--gf-ease); }
.lo--grifo .gf-word:hover:not(:disabled) { border-color:var(--gf-indigo-300); transform:translateY(-2px); box-shadow:0 1px 2px rgb(17 24 39 / .06), 0 4px 0 var(--gf-indigo-200); }
.lo--grifo .gf-word:active:not(:disabled) { transform:translateY(1px); box-shadow:0 1px 2px rgb(17 24 39 / .06); }
.lo--grifo .gf-word[aria-pressed=true] { border-color:var(--gf-indigo-500); transform:translateY(-3px); box-shadow:0 0 0 3px rgb(99 102 241 / .14), 0 5px 0 var(--gf-indigo-200); }
.lo--grifo .gf-word[aria-pressed=true]::before { transform:skewY(-2deg) scaleX(1); }
.lo--grifo .gf-word:disabled { color:var(--gf-gray-400); text-decoration:line-through; background:transparent; border-style:dashed; border-color:var(--gf-gray-300); box-shadow:none; }
.lo--grifo .gf-gap-text { display:flex; flex-direction:column; gap:10px; }
.lo--grifo .gf-gap-text p { display:flex; align-items:baseline; gap:14px; font-size:18.5px; line-height:2.4; color:var(--gf-gray-700); }
.lo--grifo .gf-line-number { display:inline-grid; place-items:center; flex:none; width:26px; height:26px; font-size:12.5px; font-weight:700; line-height:1; color:var(--gf-accent-strong); background:var(--gf-indigo-50); border:1px solid var(--gf-indigo-200); border-radius:50%; transform:translateY(-2px); }
.lo--grifo .gf-blank { --hl:var(--gf-yellow); position:relative; z-index:0; display:inline-block; min-width:158px; min-height:40px; margin-inline:4px; padding:2px 12px; font-size:14px; font-weight:500; line-height:1.6; color:var(--gf-gray-500); background:var(--gf-gray-50); border:0; border-bottom:2px dashed var(--gf-gray-400); border-radius:8px 8px 2px 2px; vertical-align:baseline; transition:background-color .15s, border-color .15s; }
.lo--grifo .gf-blank::before { content:''; position:absolute; z-index:-1; inset:12% 2px 6%; background:linear-gradient(90deg, rgb(var(--hl) / .9) 0, rgb(var(--hl) / .7) .5em, rgb(var(--hl) / .7) calc(100% - .4em), rgb(var(--hl) / .86) 100%); border-radius:4px 10px 5px 9px / 9px 4px 10px 5px; transform:skewY(-2deg) scaleX(0); transform-origin:0 50%; transition:transform .4s var(--gf-ease); }
.lo--grifo .gf-blank:hover { background:var(--gf-indigo-50); border-color:var(--gf-indigo-400); }
.lo--grifo .gf-blank[data-word] { min-width:0; padding-inline:14px; font-size:18.5px; font-weight:700; color:var(--gf-gray-900); background:transparent; border-bottom-color:transparent; }
.lo--grifo .gf-blank[data-word]::before { transform:skewY(-2deg) scaleX(1); }
.lo--grifo .gf-blank[data-result]::after { content:''; display:inline-block; width:20px; height:20px; margin-left:8px; vertical-align:-3px; border-radius:50%; background-repeat:no-repeat; background-position:center; background-size:12px 12px; }
.lo--grifo .gf-blank[data-result=correct] { --hl:var(--gf-green); }
.lo--grifo .gf-blank[data-result=correct]::after { background-color:#16a34a; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.75l6 6 9-13.5'/%3E%3C/svg%3E"); }
.lo--grifo .gf-blank[data-result=incorrect] { --hl:var(--gf-rose); text-decoration:underline wavy #e11d48; text-decoration-thickness:1.5px; text-underline-offset:5px; }
.lo--grifo .gf-blank[data-result=incorrect]::after { background-color:#e11d48; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E"); }
.lo--grifo .gf-gap-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:24px; padding-top:18px; border-top:1px solid var(--gf-gray-100); }
.lo--grifo .gf-gap-footer .gf-feedback { flex:1; min-height:0; margin:0; }

.lo--grifo .gf-deck { position:relative; width:min(100%,520px); margin:30px auto 0; perspective:1200px; }
.lo--grifo .gf-deck-shadow { position:absolute; inset:0; background:var(--gf-surface); border:1px solid var(--gf-gray-200); border-radius:22px; box-shadow:var(--gf-shadow-sm); }
.lo--grifo .gf-deck-shadow--a { transform:rotate(-4deg) translateY(8px); background:var(--gf-indigo-50); border-color:var(--gf-indigo-100); }
.lo--grifo .gf-deck-shadow--b { transform:rotate(3deg) translateY(5px); }
.lo--grifo .gf-flashcard { --hl:var(--gf-lilac); position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; min-height:264px; padding:28px 26px; text-align:center; color:var(--gf-gray-600); background:var(--gf-surface); border:1px solid var(--gf-gray-200); border-radius:22px; box-shadow:var(--gf-shadow-md); transition:transform .18s ease, box-shadow .2s ease, background-color .25s, border-color .25s; }
.lo--grifo .gf-flashcard:hover { transform:translateY(-3px); box-shadow:var(--gf-shadow-xl); border-color:var(--gf-indigo-200); }
.lo--grifo .gf-flashcard:active { transform:translateY(0) scale(.99); }
.lo--grifo .gf-flashcard strong { margin-block:20px 12px; font-size:clamp(34px,5vw,54px); font-weight:800; line-height:1.2; letter-spacing:-.04em; color:var(--gf-gray-900); }
.lo--grifo .gf-flashcard-word { background-size:100% 78%; }
.lo--grifo .gf-flashcard em { font-size:17px; line-height:1.5; }
.lo--grifo .gf-flashcard[aria-pressed=true] { --hl:var(--gf-yellow); --hl-a:.72; background:var(--gf-indigo-50); border-color:var(--gf-indigo-200); }
.lo--grifo .gf-flashcard[aria-pressed=true] .gf-small-label { color:var(--gf-accent-strong); }
.lo--grifo .gf-card-hint { display:inline-flex; align-items:center; gap:8px; margin-top:24px; padding:6px 14px; font-size:13px; font-weight:600; color:var(--gf-accent-strong); background:var(--gf-indigo-50); border-radius:999px; }
.lo--grifo .gf-flashcard[aria-pressed=true] .gf-card-hint { background:var(--gf-surface); }
.lo--grifo .gf-card-controls { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:28px; }
.lo--grifo .gf-card-controls > button { display:grid; place-items:center; width:46px; height:46px; color:var(--gf-gray-700); background:var(--gf-surface); border:1px solid var(--gf-gray-200); border-radius:50%; box-shadow:var(--gf-shadow-sm); transition:transform .15s, border-color .15s, color .15s, background-color .15s; }
.lo--grifo .gf-card-controls > button:hover { color:var(--gf-accent-strong); background:var(--gf-indigo-50); border-color:var(--gf-indigo-200); transform:translateY(-1px); }
.lo--grifo .gf-card-controls > button:active { transform:scale(.94); }
.lo--grifo .gf-card-controls > span { min-width:64px; text-align:center; font-size:14px; font-weight:700; letter-spacing:.06em; color:var(--gf-gray-500); font-variant-numeric:tabular-nums; }

.lo--grifo .gf-teacher-note { display:flex; align-items:flex-start; gap:14px; margin-top:16px; padding:16px 18px; color:var(--gf-note-text); background:var(--gf-note-bg); border:1px solid var(--gf-note-line); border-radius:16px; }
.lo--grifo .gf-teacher-note-icon { display:grid; place-items:center; flex:none; width:38px; height:38px; color:#713f12; background:rgb(var(--gf-yellow) / .7); border-radius:11px; }
.lo--grifo .gf-teacher-note strong { display:block; font-size:15px; font-weight:700; color:var(--gf-note-strong); }
.lo--grifo .gf-teacher-note p > span { display:block; margin-top:2px; font-size:15px; line-height:1.55; }
.lo--grifo .gf-lab-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:14px 24px; font-size:13px; font-weight:500; color:var(--gf-gray-500); background:var(--gf-surface); border-top:1px solid var(--gf-gray-100); }
.lo--grifo .gf-lab-footer > span { display:flex; align-items:center; gap:7px; }
.lo--grifo .gf-lab-footer > span:first-child .inline-block { color:#16a34a; }

/* ── 3 · Benefícios ──────────────────────────────────────────────── */
.lo--grifo .gf-benefits { background:var(--gf-bg); border-bottom:1px solid var(--gf-gray-100); }
.lo--grifo .gf-benefits ul { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.lo--grifo .gf-benefits li { display:flex; align-items:center; gap:16px; padding:34px 28px; font-size:clamp(16px,1.45vw,18.5px); font-weight:600; line-height:1.45; letter-spacing:-.012em; color:var(--gf-gray-900); }
.lo--grifo .gf-benefits li:first-child { padding-left:0; }
.lo--grifo .gf-benefits li + li { border-left:1px solid var(--gf-gray-100); }
.lo--grifo .gf-benefit-icon { display:grid; place-items:center; flex:none; width:50px; height:50px; border-radius:15px; transform:rotate(-4deg); }
.lo--grifo .gf-benefits li:nth-child(2) .gf-benefit-icon { transform:rotate(3deg); }

/* ── Seções ──────────────────────────────────────────────────────── */
.lo--grifo .gf-section { position:relative; padding:120px 0; overflow:clip; }
.lo--grifo .gf-section > .gf-wrap { position:relative; z-index:1; }

/* ── 4 · Funcionalidades (bento) ─────────────────────────────────── */
.lo--grifo .gf-features { background:linear-gradient(180deg, var(--gf-bg) 0, var(--gf-indigo-50) 22%, var(--gf-indigo-50) 100%); }
.lo--grifo .gf-band--features { --a:.3; --r:-5deg; right:-8%; top:84px; width:46%; height:88px; transform-origin:100% 50%; }
.lo--grifo .gf-bento { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; }
.lo--grifo .gf-tile { position:relative; display:flex; flex-direction:column; gap:28px; min-width:0; padding:34px; background:var(--gf-surface); border:1px solid var(--gf-gray-200); border-radius:24px; box-shadow:var(--gf-shadow-sm); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.lo--grifo .gf-tile:not(.gf-tile--quote):hover { transform:translateY(-4px); border-color:var(--gf-indigo-200); box-shadow:var(--gf-shadow-xl); }
.lo--grifo .gf-tile--ai { grid-column:1 / span 7; }
.lo--grifo .gf-tile--classes { grid-column:8 / span 5; }
.lo--grifo .gf-tile--page { grid-column:1 / span 5; }
.lo--grifo .gf-tile--quote { grid-column:6 / span 7; }
.lo--grifo .gf-tile-tag { display:inline-flex; align-items:center; gap:7px; align-self:flex-start; padding:6px 12px 6px 10px; font-size:13px; font-weight:700; line-height:1.3; border-radius:999px; }
.lo--grifo .gf-tile h3 { margin-top:18px; font-size:clamp(25px,2.3vw,31px); line-height:1.14; letter-spacing:-.035em; }
.lo--grifo .gf-tile-copy > p { max-width:30em; margin-top:12px; font-size:16.5px; line-height:1.65; }
.lo--grifo .gf-link { display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding-block:6px; font-size:15.5px; font-weight:600; color:var(--gf-accent); }
.lo--grifo .gf-link > span { position:relative; z-index:0; }
.lo--grifo .gf-link > span::before { content:''; position:absolute; z-index:-1; inset:16% -5px 2%; background:rgb(var(--gf-lilac) / .45); border-radius:3px 8px 4px 7px / 7px 3px 8px 4px; transform:skewY(-2deg) scaleX(0); transform-origin:0 50%; transition:transform .3s var(--gf-ease); }
.lo--grifo .gf-link > .inline-block { transition:transform .2s ease; }
.lo--grifo .gf-link:hover { color:var(--gf-accent-strong); }
.lo--grifo .gf-link:hover > span::before { transform:skewY(-2deg) scaleX(1); }
.lo--grifo .gf-link:hover > .inline-block { transform:translateX(4px); }

/* Mini-ilustrações de UI */
.lo--grifo .gf-art { display:flex; gap:14px; margin-top:auto; padding:18px; font-size:13px; line-height:1.4; color:var(--gf-gray-700); background-color:var(--gf-gray-50); background-image:radial-gradient(var(--gf-dot) 1.2px, transparent 1.3px); background-size:18px 18px; border:1px solid var(--gf-gray-100); border-radius:18px; }
.lo--grifo .gf-art > * { min-width:0; }
.lo--grifo .gf-art-form, .lo--grifo .gf-art-result, .lo--grifo .gf-art-unit { display:flex; flex-direction:column; gap:10px; padding:16px; background:var(--gf-surface); border:1px solid var(--gf-gray-200); border-radius:14px; box-shadow:var(--gf-shadow-md); }
.lo--grifo .gf-art-form { flex:1.25; }
.lo--grifo .gf-art-label { font-size:12px; font-weight:600; color:var(--gf-gray-700); }
.lo--grifo .gf-art-input { display:block; padding:9px 12px; font-size:13.5px; font-weight:500; color:var(--gf-gray-900); background:var(--gf-surface); border:1px solid var(--gf-indigo-400); border-radius:10px; box-shadow:0 0 0 3px rgb(99 102 241 / .14); }
.lo--grifo .gf-caret { display:inline-block; width:1.5px; height:1.1em; margin-left:3px; vertical-align:-.18em; background:var(--gf-indigo-600); }
.lo--grifo .gf-art-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.lo--grifo .gf-art-select { padding:5px 10px; font-size:12px; font-weight:500; color:var(--gf-gray-500); border:1px solid var(--gf-gray-200); border-radius:8px; }
.lo--grifo .gf-art-select b { color:var(--gf-accent-strong); }
.lo--grifo .gf-art-chips { display:flex; flex-wrap:wrap; gap:6px; }
.lo--grifo .gf-art-chips b { padding:4px 10px; font-size:12px; font-weight:600; color:var(--gf-gray-600); background:var(--gf-gray-100); border-radius:999px; }
.lo--grifo .gf-art-chips b.is-on { color:#fff; background:var(--gf-indigo-600); }
.lo--grifo .gf-art-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; align-self:flex-start; margin-top:2px; padding:8px 14px; font-size:13px; font-weight:600; color:#fff; background:var(--gf-indigo-600); border-radius:10px; box-shadow:0 8px 16px -8px rgb(79 70 229 / .6); }
.lo--grifo .gf-art--ai { align-items:center; flex:1; padding:22px; }
.lo--grifo .gf-art-flow { display:grid; place-items:center; flex:none; width:30px; height:30px; margin-inline:-8px; z-index:1; color:#fff; background:var(--gf-indigo-600); border:3px solid var(--gf-gray-50); border-radius:50%; box-sizing:content-box !important; }
.lo--grifo .gf-art-result { flex:1.1; gap:9px; transform:rotate(1.4deg); }
.lo--grifo .gf-art-result-title { margin-top:2px; font-size:14.5px; font-weight:800; line-height:1.25; letter-spacing:-.02em; color:var(--gf-gray-900); }
.lo--grifo .gf-art-text { font-size:12.5px; line-height:1.6; color:var(--gf-gray-600); }
.lo--grifo .gf-art-text .gf-hl { --hl:var(--gf-yellow); --hl-a:.7; color:var(--gf-gray-900); font-weight:600; }
.lo--grifo .gf-art-opt { display:flex; align-items:center; gap:8px; padding:6px 8px; font-size:12px; font-weight:500; border:1px solid var(--gf-gray-200); border-radius:9px; }
.lo--grifo .gf-art-opt i { display:grid; place-items:center; flex:none; width:20px; height:20px; font-size:10.5px; font-weight:700; color:var(--gf-gray-600); background:var(--gf-gray-100); border-radius:6px; }
.lo--grifo .gf-art-opt.is-right { font-weight:600; color:var(--gf-gray-900); background:var(--gf-ok-bg); border-color:var(--gf-ok-line); }
.lo--grifo .gf-art-opt.is-right i { color:#fff; background:#16a34a; }
.lo--grifo .gf-art-opt.is-right i svg { stroke-width:3.2 !important; }
.lo--grifo .gf-art-opt.is-right > span { background:linear-gradient(rgb(var(--gf-green) / .75), rgb(var(--gf-green) / .75)) no-repeat 0 60% / 100% 80%; padding-inline:4px; margin-inline:-4px; border-radius:3px 7px 4px 6px; }
.lo--grifo .gf-art-result-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.lo--grifo .gf-art-result .gf-ai-chip { font-size:11.5px; padding:4px 9px 4px 7px; }
.lo--grifo .gf-art-review { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--gf-gray-500); }
.lo--grifo .gf-art-line { display:block; width:var(--w,100%); height:9px; background:var(--gf-gray-200); border-radius:999px; }
.lo--grifo .gf-art-line--hl { height:13px; background:rgb(var(--gf-lilac) / .6); border-radius:3px 8px 4px 7px / 7px 3px 8px 4px; transform:skewY(-2deg); }
.lo--grifo .gf-art-line--title { height:12px; background:var(--gf-gray-900); }
.lo--grifo .gf-art--classes { flex-direction:column; }
.lo--grifo .gf-art-unit { gap:8px; }
.lo--grifo .gf-art-unit-head { display:flex; align-items:center; gap:8px; padding-bottom:10px; font-size:13.5px; font-weight:600; color:var(--gf-gray-900); border-bottom:1px solid var(--gf-gray-100); }
.lo--grifo .gf-art-unit-head b { padding:2px 8px; font-size:11.5px; font-weight:700; color:#713f12; background:rgb(var(--gf-yellow) / .6); border-radius:4px 8px 5px 7px; transform:skewY(-2deg); }
.lo--grifo .gf-art-unit-head .gf-level { margin-left:auto; font-size:11px; }
.lo--grifo .gf-art-item { display:flex; align-items:center; gap:10px; padding:7px 9px; font-size:13px; font-weight:500; border:1px solid var(--gf-gray-100); border-radius:10px; }
.lo--grifo .gf-art-item i { display:grid; place-items:center; width:24px; height:24px; border-radius:7px; }
.lo--grifo .gf-art-invite { display:flex; align-items:center; gap:10px; padding:9px 10px 9px 12px; font-size:13px; font-weight:600; color:var(--gf-gray-700); background:var(--gf-surface); border:1px solid var(--gf-gray-200); border-radius:999px; box-shadow:var(--gf-shadow-md); }
.lo--grifo .gf-art-invite > b { margin-left:auto; padding:5px 12px; font-size:12px; font-weight:600; color:var(--gf-accent-strong); background:var(--gf-indigo-50); border-radius:999px; }
.lo--grifo .gf-art-avatars { display:inline-flex; }
.lo--grifo .gf-art-avatars i { display:grid; place-items:center; width:26px; height:26px; font-size:11px; font-weight:700; color:var(--gf-accent-strong); background:var(--gf-indigo-100); border:2px solid var(--gf-surface); border-radius:50%; }
.lo--grifo .gf-art-avatars i + i { margin-left:-8px; color:#713f12; background:#fef08a; }
.lo--grifo .gf-art-avatars i:last-child { color:#065f46; background:#a7f3d0; }

.lo--grifo .gf-browser { display:flex; flex-direction:column; width:100%; background:var(--gf-surface); border:1px solid var(--gf-gray-200); border-radius:14px; box-shadow:var(--gf-shadow-md); overflow:hidden; }
.lo--grifo .gf-browser-bar { display:flex; align-items:center; gap:12px; padding:9px 12px; background:var(--gf-gray-50); border-bottom:1px solid var(--gf-gray-100); }
.lo--grifo .gf-browser-bar .gf-dots { gap:5px; }
.lo--grifo .gf-browser-bar .gf-dots i { width:9px; height:9px; }
.lo--grifo .gf-browser-url { flex:1; min-width:0; padding:3px 12px; font-size:11.5px; line-height:1.5; color:var(--gf-gray-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:var(--gf-surface); border:1px solid var(--gf-gray-200); border-radius:999px; }
.lo--grifo .gf-art-profile { display:flex; flex-direction:column; align-items:center; gap:9px; padding:20px 16px 22px; background:linear-gradient(180deg, rgb(var(--gf-mint) / .22), var(--gf-surface) 60%); }
.lo--grifo .gf-art-photo { display:grid; place-items:center; width:48px; height:48px; margin-bottom:4px; color:#065f46; background:var(--gf-surface); border:2px solid var(--gf-surface); border-radius:50%; box-shadow:0 0 0 2px rgb(var(--gf-mint) / .9), var(--gf-shadow-md); }
.lo--grifo .gf-art-profile-cta { display:flex; gap:8px; margin-top:6px; }
.lo--grifo .gf-art-profile-cta b { padding:5px 14px; font-size:12px; font-weight:600; color:var(--gf-surface); background:var(--gf-gray-900); border-radius:999px; }
.lo--grifo .gf-art-profile-cta b + b { color:var(--gf-gray-700); background:var(--gf-surface); border:1px solid var(--gf-gray-200); }

.lo--grifo .gf-tile--quote { justify-content:space-between; align-items:flex-start; gap:32px; padding:40px; color:#fff; background:linear-gradient(135deg, var(--gf-indigo-600) 0%, var(--gf-indigo-700) 100%); border-color:var(--gf-indigo-600); box-shadow:0 30px 60px -24px rgb(79 70 229 / .55); overflow:hidden; --gf-focus:#fff; }
.lo--grifo .gf-tile--quote > p { position:relative; z-index:1; max-width:11em; font-size:clamp(30px,4vw,54px); font-weight:800; line-height:1.14; letter-spacing:-.04em; text-wrap:balance; }
.lo--grifo .gf-tile--quote .gf-btn { position:relative; z-index:1; }
.lo--grifo .gf-quote-scribble { width:88%; right:-16%; bottom:-14%; --hl:255 255 255; transform:rotate(-8deg); }
.lo--grifo .gf-quote-scribble path { stroke:rgb(255 255 255 / .09); }
.lo--grifo .gf-quote-bubbles { position:absolute; z-index:1; right:36px; bottom:36px; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.lo--grifo .gf-quote-bubble { display:inline-flex; align-items:center; gap:9px; padding:8px 16px 8px 8px; font-size:15.5px; font-weight:700; letter-spacing:-.01em; color:var(--gf-indigo-900); background:#fff; border-radius:20px 20px 20px 6px; box-shadow:0 14px 28px -12px rgb(30 27 75 / .55); }
.lo--grifo .gf-quote-bubble i { display:grid; place-items:center; width:28px; height:28px; font-size:12px; font-weight:700; color:var(--gf-indigo-700); background:var(--gf-indigo-100); border-radius:50%; }
.lo--grifo .gf-quote-bubble:nth-child(1) { margin-right:88px; transform:rotate(-3deg); }
.lo--grifo .gf-quote-bubble:nth-child(2) { transform:rotate(2deg); background:#fef9c3; }
.lo--grifo .gf-quote-bubble:nth-child(2) i { color:#713f12; background:#fde047; }
.lo--grifo .gf-quote-bubble:nth-child(3) { margin-right:56px; transform:rotate(-2deg); }
.lo--grifo .gf-quote-bubble:nth-child(3) i { color:#065f46; background:#a7f3d0; }

/* ── 5 · Página do professor (bloco escuro) ──────────────────────── */
.lo--grifo .gf-pages { color:var(--gf-indigo-200); background:radial-gradient(70% 60% at 88% 0%, rgb(99 102 241 / .34), transparent 70%), radial-gradient(50% 50% at 0% 100%, rgb(206 147 255 / .16), transparent 70%), var(--gf-indigo-950); --gf-focus:#fde047; }
.lo--grifo .gf-pages h2 { color:#fff; }
.lo--grifo .gf-pages .gf-eyebrow { color:var(--gf-indigo-300); }
.lo--grifo .gf-pages .gf-heading-side { color:var(--gf-indigo-200); }
.lo--grifo .gf-band--pages-a { --a:.13; --r:-6deg; left:-6%; top:54%; width:118%; height:150px; }
.lo--grifo .gf-band--pages-b { --a:.2; --r:4deg; right:-12%; top:16%; width:52%; height:90px; transform-origin:100% 50%; }
.lo--grifo .gf-profiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; padding-top:20px; }
.lo--grifo .gf-profile { --hl:var(--gf-lilac); --hl-a:.5; display:block; transition:transform .3s ease; }
.lo--grifo .gf-profile--yellow { --hl:var(--gf-yellow); --hl-a:.4; }
.lo--grifo .gf-profile--mint { --hl:var(--gf-mint); --hl-a:.42; }
.lo--grifo .gf-profile:nth-child(2) { transform:translateY(-20px); }
.lo--grifo .gf-profile:hover { transform:translateY(-8px); }
.lo--grifo .gf-profile:nth-child(2):hover { transform:translateY(-28px); }
.lo--grifo .gf-profile .gf-browser { border-color:rgb(255 255 255 / .16); border-radius:16px; box-shadow:0 0 0 1px rgb(255 255 255 / .06), 0 40px 70px -30px rgb(0 0 0 / .7), 0 0 80px -30px rgb(var(--hl) / .5); transition:box-shadow .3s ease; }
.lo--grifo .gf-profile:hover .gf-browser { box-shadow:0 0 0 1px rgb(255 255 255 / .1), 0 46px 80px -30px rgb(0 0 0 / .8), 0 0 100px -24px rgb(var(--hl) / .75); }
.lo--grifo .gf-browser-view { position:relative; aspect-ratio:1.02 / 1; overflow:hidden; background:var(--gf-gray-100); }
.lo--grifo .gf-browser-view img { display:block; width:100%; height:auto; min-height:100%; object-fit:cover; object-position:top; transition:transform .7s ease; }
.lo--grifo .gf-profile:hover .gf-browser-view img { transform:translateY(-18px); }
/* Arte nova (mockup): recorta a página que vem dentro da imagem; --w/--x/--y são % da largura do quadro. */
.lo--grifo .gf-browser-view--mockup img, .lo--grifo .gf-profile:hover .gf-browser-view--mockup img { position:absolute; top:0; left:var(--x,0); width:var(--w,100%); max-width:none; height:auto; min-height:0; margin-top:var(--y,0); object-fit:fill; transform-origin:50% 0; }
.lo--grifo .gf-profile:hover .gf-browser-view--mockup img { transform:scale(1.035); }
.lo--grifo .gf-profile-info { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 4px 0; }
.lo--grifo .gf-profile-info h3 { font-size:22px; line-height:1.2; color:#fff; }
.lo--grifo .gf-profile-info p { margin-top:5px; font-size:15.5px; line-height:1.5; color:var(--gf-indigo-200); }
.lo--grifo .gf-profile:hover .gf-profile-name, .lo--grifo .gf-profile:focus-visible .gf-profile-name { background-size:100% 84%; }
.lo--grifo .gf-profile-arrow { display:grid; place-items:center; flex:none; width:44px; height:44px; color:#fff; border:1px solid rgb(255 255 255 / .22); border-radius:50%; transition:transform .25s ease, background-color .25s, color .25s, border-color .25s; }
.lo--grifo .gf-profile:hover .gf-profile-arrow { color:var(--gf-indigo-950); background:#fff; border-color:#fff; transform:rotate(-45deg); }

/* ── 6 · Planos ──────────────────────────────────────────────────── */
.lo--grifo .gf-pricing { background:var(--gf-bg); }
.lo--grifo .gf-heading--center { margin-bottom:64px; }
.lo--grifo .gf-plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:26px; }
.lo--grifo .gf-plan { position:relative; display:flex; flex-direction:column; padding:34px 32px 32px; background:var(--gf-surface); border:1px solid var(--gf-gray-200); border-radius:24px; box-shadow:var(--gf-shadow-sm); transition:transform .25s ease, box-shadow .25s ease, border-color .25s; }
.lo--grifo .gf-plan:hover { transform:translateY(-4px); border-color:var(--gf-indigo-200); box-shadow:var(--gf-shadow-xl); }
.lo--grifo .gf-plan h3 { font-size:22px; line-height:1.2; letter-spacing:-.025em; }
.lo--grifo .gf-plan-description { min-height:3.1em; margin-top:8px; font-size:15.5px; line-height:1.55; color:var(--gf-gray-500); }
.lo--grifo .gf-price { display:flex; align-items:baseline; gap:8px; margin-top:24px; }
.lo--grifo .gf-price strong { font-size:clamp(40px,3.9vw,52px); font-weight:800; line-height:1.1; letter-spacing:-.045em; color:var(--gf-gray-900); }
.lo--grifo .gf-plan:nth-child(1) .gf-price .gf-hl { --hl:var(--gf-mint); }
.lo--grifo .gf-plan:nth-child(3) .gf-price .gf-hl { --hl:var(--gf-sky); }
.lo--grifo .gf-price > span { font-size:16px; font-weight:500; color:var(--gf-gray-500); }
.lo--grifo .gf-credits { display:inline-flex; align-items:center; align-self:flex-start; gap:7px; margin-top:18px; padding:6px 13px 6px 10px; font-size:14px; font-weight:600; line-height:1.35; color:var(--gf-accent-strong); background:var(--gf-indigo-50); border-radius:999px; }
.lo--grifo .gf-plan ul { flex:1; display:flex; flex-direction:column; gap:13px; margin:26px 0 30px; padding-top:24px; border-top:1px solid var(--gf-gray-100); }
.lo--grifo .gf-plan li { display:flex; align-items:flex-start; gap:11px; font-size:15.5px; line-height:1.45; color:var(--gf-gray-700); }
.lo--grifo .gf-plan-check { display:grid; place-items:center; flex:none; width:21px; height:21px; margin-top:1px; color:#166534; background:rgb(var(--gf-green) / .55); border-radius:50%; }
.lo--grifo .gf-plan-check svg { stroke-width:2.8 !important; }
.lo--grifo .gf-plan .gf-btn { width:100%; min-height:50px; }
.lo--grifo .gf-plan--featured { color:var(--gf-indigo-100); background:linear-gradient(160deg, var(--gf-indigo-600) 0%, #4a41dd 55%, var(--gf-indigo-700) 100%); border-color:var(--gf-indigo-600); box-shadow:0 36px 70px -26px rgb(79 70 229 / .6), 0 14px 28px -14px rgb(49 46 129 / .35); transform:translateY(-14px); --gf-focus:#fde047; }
.lo--grifo .gf-plan--featured:hover { transform:translateY(-18px); border-color:var(--gf-indigo-600); box-shadow:0 44px 80px -26px rgb(79 70 229 / .7), 0 14px 28px -14px rgb(49 46 129 / .35); }
.lo--grifo .gf-plan--featured h3, .lo--grifo .gf-plan--featured .gf-price strong { color:#fff; }
.lo--grifo .gf-plan--featured .gf-price .gf-hl { --hl:255 255 255; --hl-a:.17; --hl-a2:.26; }
.lo--grifo .gf-plan--featured .gf-plan-description, .lo--grifo .gf-plan--featured .gf-price > span { color:var(--gf-indigo-100); }
.lo--grifo .gf-plan--featured .gf-credits { color:#fff; background:rgb(255 255 255 / .16); }
.lo--grifo .gf-plan--featured ul { border-top-color:rgb(255 255 255 / .2); }
.lo--grifo .gf-plan--featured li { color:#fff; }
.lo--grifo .gf-plan--featured .gf-plan-check { color:var(--gf-indigo-700); background:#fff; }
.lo--grifo .gf-plan-ribbon { position:absolute; top:-17px; left:28px; display:inline-flex; align-items:center; gap:7px; padding:7px 14px 7px 11px; font-size:13px; font-weight:700; line-height:1.3; white-space:nowrap; color:#422006; background:#fde047; border-radius:5px 12px 6px 11px / 11px 5px 12px 6px; box-shadow:0 8px 18px -8px rgb(30 27 75 / .5); transform:rotate(-2deg); }
.lo--grifo .gf-pricing-note { margin-top:44px; text-align:center; font-size:14.5px; color:var(--gf-gray-500); }

/* ── 7 · Dúvidas ─────────────────────────────────────────────────── */
.lo--grifo .gf-faq { background:var(--gf-gray-50); border-top:1px solid var(--gf-gray-100); }
.lo--grifo .gf-faq-grid { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:72px; align-items:start; }
.lo--grifo .gf-faq-intro { position:sticky; top:104px; }
.lo--grifo .gf-faq-intro h2 { margin-top:18px; }
.lo--grifo .gf-faq-intro .gf-heading-side { margin-top:22px; }
.lo--grifo .gf-faq-double { position:relative; width:150px; height:24px; margin-top:34px; --hl:var(--gf-pink); }
.lo--grifo .gf-faq-double path { stroke-width:7; stroke:rgb(var(--hl) / .85); }
.lo--grifo .gf-faq-list { display:flex; flex-direction:column; gap:14px; }
.lo--grifo .gf-faq details { --hl:var(--gf-lilac); background:var(--gf-surface); border:1px solid var(--gf-gray-200); border-radius:18px; box-shadow:var(--gf-shadow-sm); transition:border-color .2s, box-shadow .25s; }
.lo--grifo .gf-faq details:nth-child(2) { --hl:var(--gf-yellow); --hl-a:.66; }
.lo--grifo .gf-faq details:nth-child(3) { --hl:var(--gf-mint); }
.lo--grifo .gf-faq details:nth-child(4) { --hl:var(--gf-sky); }
.lo--grifo .gf-faq details:hover { border-color:var(--gf-indigo-200); }
.lo--grifo .gf-faq details[open] { border-color:var(--gf-indigo-200); box-shadow:var(--gf-shadow-md); }
.lo--grifo .gf-faq summary { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px 24px; font-size:18.5px; font-weight:700; line-height:1.4; letter-spacing:-.02em; color:var(--gf-gray-900); cursor:pointer; list-style:none; border-radius:17px; }
.lo--grifo .gf-faq summary::-webkit-details-marker { display:none; }
.lo--grifo .gf-faq details[open] .gf-faq-q > span { background-size:100% 84%; }
.lo--grifo .gf-faq-chevron { display:grid; place-items:center; flex:none; width:36px; height:36px; color:var(--gf-gray-600); background:var(--gf-gray-100); border-radius:50%; transition:transform .25s ease, background-color .2s, color .2s; }
.lo--grifo .gf-faq summary:hover .gf-faq-chevron { color:var(--gf-accent-strong); background:var(--gf-indigo-50); }
.lo--grifo .gf-faq details[open] .gf-faq-chevron { color:#fff; background:var(--gf-indigo-600); transform:rotate(180deg); }
.lo--grifo .gf-faq details > p { padding:0 24px 24px; max-width:42em; font-size:16.5px; line-height:1.7; color:var(--gf-gray-600); }

/* ── 8 · CTA final ───────────────────────────────────────────────── */
.lo--grifo .gf-final { position:relative; padding:150px 0 158px; background:var(--gf-bg); border-top:1px solid var(--gf-gray-100); overflow:clip; }
.lo--grifo .gf-band--final-a { --a:.34; --r:-7deg; left:-6%; top:40%; width:116%; height:clamp(110px,15vw,210px); border-radius:60px 160px 80px 140px / 140px 60px 160px 80px; }
.lo--grifo .gf-band--final-b { --hl:var(--gf-yellow); --a:.46; --r:-4deg; left:46%; top:70%; width:64%; height:clamp(70px,8vw,120px); }
.lo--grifo .gf-band--final-c { --hl:var(--gf-mint); --a:.36; --r:-10deg; left:-8%; top:12%; width:42%; height:clamp(60px,7vw,100px); }
.lo--grifo .gf-band--final-d { --hl:var(--gf-sky); --a:.34; --r:5deg; left:68%; top:9%; width:40%; height:clamp(44px,5vw,72px); }
.lo--grifo .gf-final-inner { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; }
.lo--grifo .gf-final h2 { max-width:13.5em; font-size:clamp(38px,6vw,86px); line-height:1.03; letter-spacing:-.05em; }
.lo--grifo .gf-final .gf-hl { --hl-a:.78; --hl-a2:.9; }
.lo--grifo .gf-final p { margin-top:28px; font-size:clamp(18px,1.7vw,22px); font-weight:500; color:var(--gf-gray-700); }
.lo--grifo .gf-final .gf-btn { margin-top:38px; }
.lo--grifo .gf-final-caption { display:inline-flex; align-items:center; gap:9px; margin-top:22px; padding:6px 14px 6px 8px; font-size:14.5px; font-weight:500; color:var(--gf-gray-700); background:color-mix(in srgb, var(--gf-bg) 80%, transparent); border-radius:999px; }
.lo--grifo .gf-final-ticks { width:64px; position:relative; margin-bottom:10px; --hl:var(--gf-yellow); }
.lo--grifo .gf-final-ticks path { stroke:rgb(234 179 8 / .9); }

/* ── Rodapé ──────────────────────────────────────────────────────── */
.lo--grifo .gf-footer { padding:44px 0 124px; background:var(--gf-bg); border-top:1px solid var(--gf-gray-100); }
.lo--grifo .gf-footer-inner { display:flex; align-items:center; justify-content:space-between; gap:32px; }
.lo--grifo .gf-footer .gf-logo { margin-left:-6px; }
.lo--grifo .gf-footer-brand p { margin-top:10px; font-size:15px; color:var(--gf-gray-500); }
.lo--grifo .gf-footer nav { display:flex; flex-wrap:wrap; gap:6px 26px; font-size:15px; font-weight:500; color:var(--gf-gray-600); }
.lo--grifo .gf-footer nav a { padding:8px 0; transition:color .15s; }
.lo--grifo .gf-footer nav a:hover { color:var(--gf-accent-strong); }
.lo--grifo .gf-footer small { font-size:14px; color:var(--gf-gray-500); }

/* Troca de tema suave: só cores; elementos com transição própria mantêm a deles. */
.lo--grifo :where(.gf-page) :where(header, section, footer, article, aside, details, div, ul, li, p, h1, h2, h3, h4, small, strong) { transition:background-color .3s ease, border-color .3s ease, color .3s ease; }

/* ── Animações (só com movimento permitido) ──────────────────────── */
@keyframes gf-ink { from { background-position:100% 0; } to { background-position:0 0; } }
@keyframes gf-menu-in { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
@keyframes gf-pop-in { from { opacity:0; transform:scale(.96) translateY(-4px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes gf-grifar { from { transform:skewY(-2deg) scaleX(0); } to { transform:skewY(-2deg) scaleX(1); } }
@keyframes gf-band-in { from { transform:rotate(var(--r,-4deg)) scaleX(0); } to { transform:rotate(var(--r,-4deg)) scaleX(1); } }
@keyframes gf-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes gf-rise { from { opacity:0; translate:0 22px; } to { opacity:1; translate:0 0; } }
@keyframes gf-pen-move { from { left:-.3em; } to { left:calc(100% + .3em); } }
@keyframes gf-pen-rest { 0%,100% { translate:0 0; } 50% { translate:.12em -.28em; } }
@keyframes gf-bob { 0%,100% { translate:0 0; } 50% { translate:0 -.5em; } }
@keyframes gf-caret { 0%,55% { opacity:1; } 56%,100% { opacity:0; } }
@keyframes gf-flip-a { 0% { transform:rotateX(0); } 50% { transform:rotateX(88deg); } 100% { transform:rotateX(0); } }
@keyframes gf-flip-b { 0% { transform:rotateX(0); } 50% { transform:rotateX(-88deg); } 100% { transform:rotateX(0); } }
@keyframes gf-word-a { 0%,50% { background-size:0% 78%; } 100% { background-size:100% 78%; } }
@keyframes gf-word-b { 0%,50% { background-size:0% 78%; } 100% { background-size:100% 78%; } }
@keyframes gf-word-dark-a { 0%,50% { background-size:0% 100%, 0% 78%; } 100% { background-size:100% 100%, 100% 78%; } }
@keyframes gf-word-dark-b { 0%,50% { background-size:0% 100%, 0% 78%; } 100% { background-size:100% 100%, 100% 78%; } }
@keyframes gf-pop { 0% { scale:1; } 45% { scale:1.025; } 100% { scale:1; } }
@keyframes gf-shake { 0%,100% { translate:0 0; } 25% { translate:-5px 0; } 75% { translate:5px 0; } }
@keyframes gf-pulse { 0%,100% { box-shadow:0 0 0 3px rgb(34 197 94 / .2); } 50% { box-shadow:0 0 0 6px rgb(34 197 94 / .08); } }

@media (prefers-reduced-motion:no-preference) {
  /* Hero: os grifos são passados em sequência, com a caneta acompanhando o da resposta certa */
  .lo--grifo .gf-hl--load::before { animation:gf-grifar .75s var(--gf-ease) both; animation-delay:var(--gf-delay,.3s); }
  .lo--grifo .gf-d1 { --gf-delay:.35s; }
  .lo--grifo .gf-d2 { --gf-delay:.95s; }
  .lo--grifo .gf-d4 { --gf-delay:2.5s; }
  .lo--grifo .gf-d5 { --gf-delay:2.9s; }
  .lo--grifo .gf-mini, .lo--grifo .gf-float { animation:gf-rise .7s cubic-bezier(.2,.7,.2,1) both; }
  .lo--grifo .gf-mini--card { animation-delay:.1s; }
  .lo--grifo .gf-mini--quiz { animation-delay:.2s; }
  .lo--grifo .gf-mini--gap { animation-delay:.32s; }
  .lo--grifo .gf-float--ai { animation-delay:.5s; }
  .lo--grifo .gf-float--aha { animation:gf-rise .6s cubic-bezier(.2,.7,.2,1) 2.4s both, gf-bob 5s ease-in-out 3s infinite; }
  .lo--grifo .gf-float--lesson { animation-delay:.6s; }
  .lo--grifo .gf-stack-band { animation:gf-stack-band-in 1s var(--gf-ease) .15s both; }
  .lo--grifo .gf-stack-band--yellow { animation-delay:.45s; }
  .lo--grifo .gf-mini-stroke::before { animation:gf-grifar 1.1s var(--gf-ease) 1.3s both; }
  .lo--grifo .gf-stack-pen { animation:gf-pen-move 1.1s var(--gf-ease) 1.3s both, gf-pen-rest 4.5s ease-in-out 2.4s infinite; }
  .lo--grifo .gf-stack-ticks path { animation:gf-draw .5s ease-out 2.6s both; }
  .lo--grifo .gf-caret { animation:gf-caret 1.1s steps(1) infinite; }
  .lo--grifo .gf-menu { animation:gf-menu-in .22s ease-out; }
  .lo--grifo .gf-lang-menu { animation:gf-pop-in .16s ease-out; }
  .lo--grifo .gf-live-dot { animation:gf-pulse 2s ease-in-out infinite; }
  .dark .lo--grifo .gf-hl--load .gf-hl-t { animation:gf-ink .75s var(--gf-ease) both; animation-delay:var(--gf-delay,.3s); }
  .dark .lo--grifo .gf-mini-stroke .gf-hl-t { animation:gf-ink 1.1s var(--gf-ease) 1.3s both; }
  /* Demo */
  .dark .lo--grifo .gf-flashcard[aria-pressed=true] .gf-flashcard-word { animation-name:gf-word-dark-a; }
  .dark .lo--grifo .gf-flashcard[aria-pressed=false] .gf-flashcard-word { animation-name:gf-word-dark-b; }
  .lo--grifo .gf-flashcard[aria-pressed=true] { animation:gf-flip-a .42s ease; }
  .lo--grifo .gf-flashcard[aria-pressed=false] { animation:gf-flip-b .42s ease; }
  .lo--grifo .gf-flashcard[aria-pressed=true] .gf-flashcard-word { animation:gf-word-a .8s var(--gf-ease); }
  .lo--grifo .gf-flashcard[aria-pressed=false] .gf-flashcard-word { animation:gf-word-b .8s var(--gf-ease); }
  .lo--grifo .nv-answer[data-result=correct], .lo--grifo .gf-blank[data-result=correct] { animation:gf-pop .4s ease; }
  .lo--grifo .nv-answer[data-result=incorrect], .lo--grifo .gf-blank[data-result=incorrect] { animation:gf-shake .35s ease; }
  /* Ao rolar: cada grifo cresce da esquerda para a direita conforme entra na tela */
  @supports (animation-timeline:view()) {
    .lo--grifo .gf-hl:not(.gf-hl--load):not(.gf-hl--static)::before { animation:gf-grifar linear both; animation-timeline:view(); animation-range:entry 20% cover 24%; }
    .dark .lo--grifo .gf-hl:not(.gf-hl--load):not(.gf-hl--static) .gf-hl-t { animation:gf-ink linear both; animation-timeline:view(); animation-range:entry 20% cover 24%; }
    .lo--grifo .gf-band { animation:gf-band-in linear both; animation-timeline:view(); animation-range:entry 0% cover 30%; }
    .lo--grifo .gf-mark:not(.gf-stack-ticks):not(.gf-quote-scribble) path { animation:gf-draw linear both; animation-timeline:view(); animation-range:entry 20% cover 26%; }
  }
}
@keyframes gf-stack-band-in { from { scale:0 1; } to { scale:1 1; } }
@media (prefers-reduced-motion:reduce) {
  .lo--grifo .gf-page *, .lo--grifo .gf-page *::before, .lo--grifo .gf-page *::after { transition:none !important; animation:none !important; }
}

/* Tinta que acompanha o traço: quando o texto fica escuro sobre um grifo sólido em fundo escuro,
   a cor do texto é um degradê recortado nas letras que avança junto com o grifo (nunca há texto escuro sobre fundo escuro). */
.lo--grifo .gf-hl--glow.gf-hl--yellow .gf-hl-t { --gf-hl-paper:#fff; color:transparent; background:linear-gradient(90deg, var(--gf-hl-ink) 50%, var(--gf-hl-paper) 50%) 0 0 / 200% 100% no-repeat; -webkit-background-clip:text; background-clip:text; }
@media (prefers-reduced-motion:no-preference) {
  @supports (animation-timeline:view()) {
    .lo--grifo .gf-hl--glow.gf-hl--yellow .gf-hl-t { animation:gf-ink linear both; animation-timeline:view(); animation-range:entry 20% cover 24%; }
  }
}

/* ── Responsivo ──────────────────────────────────────────────────── */
@media (max-width:1100px) {
  .lo--grifo .gf-nav-links { gap:0; font-size:14.5px; }
  .lo--grifo .gf-nav-links a { padding:9px 9px; }
  .lo--grifo .gf-hero-grid { gap:36px; }
  .lo--grifo .gf-bento, .lo--grifo .gf-plans, .lo--grifo .gf-profiles { gap:20px; }
  .lo--grifo .gf-tile { padding:28px; }
  .lo--grifo .gf-plan { padding:30px 24px 26px; }
  .lo--grifo .gf-tab small { display:none; }
  .lo--grifo .gf-demo-arrow { display:none; }
  .lo--grifo .gf-faq-grid { gap:48px; }
  .lo--grifo .gf-art--ai { flex-direction:column; align-items:stretch; }
  .lo--grifo .gf-art-flow { align-self:center; margin:-8px 0; transform:rotate(90deg); }
  .lo--grifo .gf-art-result { transform:none; }
}
@media (min-width:921px) {
  .lo--grifo .gf-menu { display:none !important; }
}
@media (max-width:920px) {
  .lo--grifo .gf-nav-links { display:none; }
  .lo--grifo .gf-lang, .lo--grifo .gf-nav-divider { display:none; }
  .lo--grifo .gf-burger { display:inline-flex; margin-left:2px; }
  .lo--grifo .gf-nav-actions .gf-btn--sm { margin-inline:6px 2px; }
  .lo--grifo .gf-hero { padding:52px 0 84px; }
  .lo--grifo .gf-hero-halo { top:34%; right:-30%; width:120vw; }
  .lo--grifo .gf-hero-grid { grid-template-columns:minmax(0,1fr); gap:60px; }
  .lo--grifo .gf-hero-copy { display:flex; flex-direction:column; align-items:center; text-align:center; }
  .lo--grifo .gf-actions { justify-content:center; }
  .lo--grifo .gf-page h1 { font-size:clamp(40px,9vw,72px); }
  .lo--grifo .gf-stack { max-width:520px; }
  .lo--grifo .gf-heading { grid-template-columns:minmax(0,1fr); gap:18px; align-items:start; margin-bottom:40px; }
  .lo--grifo .gf-heading--center { margin-bottom:56px; }
  .lo--grifo .gf-demo-arrow { display:none; }
  .lo--grifo .gf-demo { padding:80px 0 88px; }
  .lo--grifo .gf-band--demo { top:296px; width:84%; height:80px; }
  .lo--grifo .gf-section { padding:92px 0; }
  .lo--grifo .gf-benefits ul { grid-template-columns:minmax(0,1fr); padding-block:12px; }
  .lo--grifo .gf-benefits li, .lo--grifo .gf-benefits li:first-child { padding:16px 0; }
  .lo--grifo .gf-benefits li + li { border-left:0; border-top:1px solid var(--gf-gray-100); }
  .lo--grifo .gf-tile--ai, .lo--grifo .gf-tile--classes, .lo--grifo .gf-tile--page, .lo--grifo .gf-tile--quote { grid-column:1 / -1; }
  .lo--grifo .gf-art--ai { flex-direction:row; align-items:center; }
  .lo--grifo .gf-art-flow { align-self:center; margin:0 -8px; transform:none; }
  .lo--grifo .gf-art-result { transform:rotate(1.4deg); }
  .lo--grifo .gf-tile--quote { min-height:340px; }
  .lo--grifo .gf-plans { grid-template-columns:minmax(0,1fr); gap:36px; max-width:540px; margin-inline:auto; }
  .lo--grifo .gf-plan--featured, .lo--grifo .gf-plan--featured:hover { transform:none; }
  .lo--grifo .gf-plan-description { min-height:0; }
  .lo--grifo .gf-profiles { grid-template-columns:minmax(0,1fr); gap:44px; max-width:540px; margin-inline:auto; padding-top:0; }
  .lo--grifo .gf-profile:nth-child(2), .lo--grifo .gf-profile:nth-child(2):hover { transform:none; }
  .lo--grifo .gf-faq-grid { grid-template-columns:minmax(0,1fr); gap:36px; }
  .lo--grifo .gf-faq-intro { position:static; }
  .lo--grifo .gf-faq-double { display:none; }
  .lo--grifo .gf-quiz-columns { grid-template-columns:minmax(0,1fr); gap:24px; }
  .lo--grifo .gf-exercise { min-height:0; }
  .lo--grifo .gf-final { padding:112px 0 120px; }
  .lo--grifo .gf-footer-inner { flex-direction:column; align-items:flex-start; gap:20px; }
}
@media (min-width:641px) and (max-width:920px) {
  .lo--grifo .gf-profiles { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; max-width:none; }
  .lo--grifo .gf-profile-info h3 { font-size:19px; }
  .lo--grifo .gf-profile-info p { font-size:14.5px; }
  .lo--grifo .gf-profile-arrow { display:none; }
  .lo--grifo .gf-tile--classes { grid-column:1 / span 6; }
  .lo--grifo .gf-tile--page { grid-column:7 / span 6; }
}
@media (max-width:640px) {
  .lo--grifo { font-size:16px; }
  .lo--grifo .gf-wrap { width:calc(100% - 32px); }
  .lo--grifo .gf-nav-inner { min-height:60px; gap:10px; }
  .lo--grifo .gf-logo { font-size:23px; }
  .lo--grifo .gf-nav-actions { gap:0; }
  .lo--grifo .gf-nav-actions > .gf-nav-login, .lo--grifo .gf-nav-actions > .gf-nav-logout { display:none; }
  .lo--grifo .gf-only-wide { display:none; }
  .lo--grifo .gf-only-narrow { display:inline; }
  .lo--grifo .gf-page main > section[id] { scroll-margin-top:64px; }
  .lo--grifo .gf-hero { padding:40px 0 68px; }
  .lo--grifo .gf-pill { font-size:13px; }
  .lo--grifo .gf-hero h1 { margin-top:20px; }
  .lo--grifo .gf-lead { margin-top:20px; }
  .lo--grifo .gf-actions { flex-direction:column; align-self:stretch; gap:12px; margin-top:28px; }
  .lo--grifo .gf-actions .gf-btn { width:100%; }
  .lo--grifo .gf-hero-grid { gap:48px; }
  .lo--grifo .gf-demo { padding:64px 0 72px; }
  .lo--grifo .gf-band--demo { display:none; }
  .lo--grifo .gf-band--features { top:18px; width:56%; height:44px; }
  .lo--grifo .gf-heading-side { font-size:16.5px; }
  .lo--grifo .gf-lab { border-radius:18px; }
  .lo--grifo .gf-lab-chrome { padding:10px 14px; gap:12px; }
  .lo--grifo .gf-lab-url { display:none; }
  .lo--grifo .gf-lab-head { padding:16px; }
  .lo--grifo .gf-lab-tools { width:100%; justify-content:space-between; }
  .lo--grifo .gf-role-switch button { min-height:40px; }
  .lo--grifo .gf-tabs { gap:8px; padding:12px 16px; }
  .lo--grifo .gf-tab { flex-direction:column; align-items:center; gap:8px; min-height:0; padding:12px 6px; text-align:center; }
  .lo--grifo .gf-tab-icon { width:36px; height:36px; }
  .lo--grifo .gf-tab strong { font-size:13px; line-height:1.25; }
  .lo--grifo .gf-stage { padding:12px; }
  .lo--grifo .gf-exercise { padding:20px 16px 22px; border-radius:16px; }
  .lo--grifo .gf-exercise-heading { flex-direction:column-reverse; gap:12px; padding-bottom:16px; }
  .lo--grifo .gf-exercise-heading h3 { font-size:19px; }
  .lo--grifo .gf-reading { padding:18px; }
  .lo--grifo .gf-question h4 { font-size:20px; }
  .lo--grifo .nv-answer { padding:13px 14px 13px 56px; font-size:15px; }
  .lo--grifo .nv-answer-letter { left:12px; }
  .lo--grifo .gf-quiz-actions .gf-btn { width:100%; }
  .lo--grifo .gf-word-bank { margin:20px 0; padding:14px; }
  .lo--grifo .gf-word { padding:0 14px; font-size:15.5px; }
  .lo--grifo .gf-gap-text p { gap:10px; font-size:16.5px; line-height:2.5; }
  .lo--grifo .gf-blank { min-width:132px; font-size:13px; }
  .lo--grifo .gf-blank[data-word] { font-size:16.5px; }
  .lo--grifo .gf-gap-footer { flex-direction:column; align-items:stretch; gap:14px; }
  .lo--grifo .gf-flashcard { min-height:236px; padding:24px 18px; }
  .lo--grifo .gf-flashcard em { font-size:15.5px; }
  .lo--grifo .gf-lab-footer { padding:12px 16px; font-size:12.5px; }
  .lo--grifo .gf-section { padding:72px 0; }
  .lo--grifo .gf-bento { gap:16px; }
  .lo--grifo .gf-tile { gap:22px; padding:24px 20px 20px; border-radius:20px; }
  .lo--grifo .gf-tile--quote { padding:30px 24px; }
  .lo--grifo .gf-art { padding:12px; border-radius:14px; }
  .lo--grifo .gf-art--ai { flex-direction:column; align-items:stretch; padding:12px; }
  .lo--grifo .gf-art-flow { align-self:center; margin:-8px 0; transform:rotate(90deg); }
  .lo--grifo .gf-art-result { transform:none; }
  .lo--grifo .gf-tile--quote { min-height:0; }
  .lo--grifo .gf-quote-bubbles { position:relative; right:auto; bottom:auto; align-items:flex-start; align-self:stretch; }
  .lo--grifo .gf-quote-bubble { font-size:14.5px; }
  .lo--grifo .gf-plan { padding:30px 24px 26px; }
  .lo--grifo .gf-faq summary { padding:18px; font-size:17px; gap:12px; }
  .lo--grifo .gf-faq details > p { padding:0 18px 20px; font-size:16px; }
  .lo--grifo .gf-final { padding:88px 0 96px; }
  .lo--grifo .gf-final .gf-btn { width:100%; }
  .lo--grifo .gf-footer { padding:36px 0 112px; }
}
@media (max-width:380px) {
  .lo--grifo .gf-page h1 { font-size:37px; }
  .lo--grifo .gf-page h2 { font-size:30px; }
  .lo--grifo .gf-btn--sm { padding:0 12px; font-size:13.5px; }
  .lo--grifo .gf-lab-badge { font-size:11px; padding:4px 9px; }
  .lo--grifo .gf-restart { padding:0 11px; }
  .lo--grifo .gf-role-switch button { padding:0 12px; }
  .lo--grifo .gf-blank { min-width:116px; }
  .lo--grifo .gf-benefits li { font-size:15.5px; }
  .lo--grifo .gf-pill { font-size:12px; padding:6px 12px 6px 10px; gap:6px; }
  .lo--grifo .gf-caption { font-size:13.5px; }
  .lo--grifo .gf-lab-head { padding:14px 12px; }
  .lo--grifo .gf-lab-tools { gap:6px; }
  .lo--grifo .gf-role-switch button, .lo--grifo .gf-restart { font-size:13px; }
  .lo--grifo .gf-question-meta { font-size:10.5px; letter-spacing:.05em; }
  .lo--grifo .gf-reading-foot { font-size:12px; }
  .lo--grifo .gf-tabs { padding:12px; gap:6px; }
  .lo--grifo .gf-tab strong { font-size:12.5px; }
  .lo--grifo .gf-benefit-icon { width:44px; height:44px; }
}

/* ── Modo escuro ─────────────────────────────────────────────────────
   A classe `dark` fica no <html> (layout + landing--dark-mode, chave localStorage.darkMode do app).
   Quase tudo muda só pelos tokens; abaixo deles ficam os ajustes de cor literal.
   O grifo no escuro: nos títulos e palavras-chave vira traço sólido e luminoso com tinta escura;
   nos estados da demo continua translúcido, com texto claro. */
html:has(> .lo--grifo) { color-scheme:light; }
html.dark:has(> .lo--grifo) { color-scheme:dark; background:#030712; }
.dark .lo--grifo {
  --gf-bg:#030712; --gf-surface:#111827;
  --gf-gray-50:#0b1120; --gf-gray-100:#1f2937; --gf-gray-200:#2b3648; --gf-gray-300:#4b5563; --gf-gray-400:#6b7280;
  --gf-gray-500:#9ca3af; --gf-gray-600:#d1d5db; --gf-gray-700:#e5e7eb; --gf-gray-900:#f9fafb;
  --gf-indigo-50:rgb(99 102 241 / .13); --gf-indigo-100:rgb(99 102 241 / .24); --gf-indigo-200:rgb(129 140 248 / .42); --gf-indigo-300:#6366f1; --gf-indigo-500:#818cf8;
  --gf-accent:#818cf8; --gf-accent-strong:#a5b4fc; --gf-accent-ink:#c7d2fe;
  --gf-dot:#1c2433; --gf-nav-bg:rgb(3 7 18 / .8); --gf-hl-paper:#f9fafb;
  --gf-ok-bg:rgb(34 197 94 / .12); --gf-ok-line:rgb(74 222 128 / .5); --gf-ok-text:#bbf7d0;
  --gf-bad-bg:rgb(244 63 94 / .13); --gf-bad-line:rgb(251 113 133 / .5); --gf-bad-text:#fecdd3;
  --gf-note-bg:rgb(253 224 71 / .07); --gf-note-line:rgb(253 224 71 / .3); --gf-note-text:#fde68a; --gf-note-strong:#fef08a;
  --gf-hero-top:rgb(99 102 241 / .17); --gf-halo:radial-gradient(closest-side, rgb(99 102 241 / .36) 0%, rgb(99 102 241 / .13) 48%, rgb(99 102 241 / 0) 100%);
  --gf-shadow-sm:0 1px 2px rgb(0 0 0 / .45);
  --gf-shadow-md:0 1px 2px rgb(0 0 0 / .45), 0 12px 28px -12px rgb(0 0 0 / .75);
  --gf-shadow-xl:0 2px 4px rgb(0 0 0 / .45), 0 30px 60px -22px rgb(0 0 0 / .9), 0 0 70px -30px rgb(129 140 248 / .5);
  --gf-focus:#a5b4fc;
}
/* Grifo sólido + tinta */
.dark .lo--grifo .gf-hl { --hl-a:.95; --hl-a2:1; }
.dark .lo--grifo .gf-hl-t, .lo--grifo .gf-hl--glow.gf-hl--yellow .gf-hl-t { padding:.18em .08em; margin-inline:-.08em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.dark .lo--grifo .gf-hl-t { color:transparent; background:linear-gradient(90deg, var(--gf-hl-ink) 50%, var(--gf-hl-paper) 50%) 0 0 / 200% 100% no-repeat; -webkit-background-clip:text; background-clip:text; }
.dark .lo--grifo .gf-hl::before { top:9%; height:93%; }
.dark .lo--grifo :is(h1,h2) .gf-hl::before, .dark .lo--grifo .gf-tile--quote .gf-hl::before { box-shadow:0 0 34px rgb(var(--hl) / .22); }
.dark .lo--grifo .gf-hl--yellow { --hl-a:.95; --hl-a2:1; }
.dark .lo--grifo .gf-mini-stroke::before { background:rgb(var(--gf-green)); }
.dark .lo--grifo .gf-plan--featured .gf-price .gf-hl { --hl:var(--gf-yellow); --hl-a:.96; --hl-a2:1; }
/* Grifo translúcido (estados e hovers) */
.dark .lo--grifo .nv-answer, .dark .lo--grifo .gf-faq details, .dark .lo--grifo .gf-tab-label { --hl-a:.4; }
.dark .lo--grifo .nv-answer[data-result=correct] { --hl-a:.34; }
.dark .lo--grifo .nv-answer[data-result=incorrect] { --hl-a:.36; }
.dark .lo--grifo .gf-evidence { --hl-a:.36; }
.dark .lo--grifo .gf-lab:has([data-role=teacher][aria-pressed=true]) .gf-evidence { color:#fef9c3; }
/* Flashcard: traço sólido; a tinta é uma segunda camada de fundo recortada nas letras (cresce junto com o traço) */
.dark .lo--grifo .gf-flashcard-word { color:transparent; background-image:linear-gradient(var(--gf-hl-ink), var(--gf-hl-ink)), linear-gradient(rgb(var(--hl) / .95), rgb(var(--hl) / .95)); -webkit-background-clip:text, border-box; background-clip:text, border-box; background-size:100% 100%, 100% 78%; background-position:0 0, 0 62%; }
.dark .lo--grifo .gf-art-opt.is-right > span { background-image:linear-gradient(rgb(var(--gf-green) / .3), rgb(var(--gf-green) / .3)); }
.dark .lo--grifo .gf-art-line--hl { background:rgb(var(--gf-lilac) / .75); }
/* Lacuna preenchida e palavra selecionada: traço sólido, tinta acompanhando */
.dark .lo--grifo .gf-word .gf-hl-t { background-position:100% 0; transition:background-position .3s var(--gf-ease); }
.dark .lo--grifo .gf-word[aria-pressed=true] .gf-hl-t { background-position:0 0; }
.dark .lo--grifo .gf-word:disabled .gf-hl-t { background:none; color:inherit; }
.dark .lo--grifo .gf-word[aria-pressed=true] { box-shadow:0 0 0 3px rgb(129 140 248 / .25), 0 5px 0 rgb(129 140 248 / .4); }
.dark .lo--grifo .gf-blank[data-word] { color:var(--gf-hl-ink); transition:color .2s ease .12s, background-color .15s, border-color .15s; }
.dark .lo--grifo .gf-blank::before { background:rgb(var(--hl) / .95); }
.dark .lo--grifo .gf-word::before { background:rgb(var(--gf-yellow) / .95); }
.dark .lo--grifo .gf-blank[data-result=incorrect] { text-decoration-color:#9f1239; }
/* Tons de chips e ícones */
.dark .lo--grifo .gf-tint--lilac, .dark .lo--grifo .gf-mini-icon--lilac { background:rgb(var(--gf-lilac) / .2); color:#e9d5ff; }
.dark .lo--grifo .gf-tint--yellow, .dark .lo--grifo .gf-mini-icon--yellow { background:rgb(var(--gf-yellow) / .17); color:#fde68a; }
.dark .lo--grifo .gf-tint--mint, .dark .lo--grifo .gf-mini-icon--mint { background:rgb(var(--gf-mint) / .17); color:#a7f3d0; }
.dark .lo--grifo .gf-tab-icon { background:rgb(var(--hl) / .2); }
.dark .lo--grifo .gf-ai-chip, .dark .lo--grifo .gf-float--ai { color:#e9d5ff; background:rgb(var(--gf-lilac) / .16); border-color:rgb(var(--gf-lilac) / .42); }
.dark .lo--grifo .gf-float--ai { background:#1d1533; }
.dark .lo--grifo .gf-caption-check, .dark .lo--grifo .gf-plan-check { color:#86efac; background:rgb(var(--gf-green) / .2); }
.dark .lo--grifo .gf-plan--featured .gf-plan-check { color:var(--gf-indigo-700); background:#fff; }
.dark .lo--grifo .gf-art-unit-head b { color:#422006; background:rgb(var(--gf-yellow) / .95); }
.dark .lo--grifo .gf-art-photo { color:#6ee7b7; }
.dark .lo--grifo .gf-teacher-note-icon { color:#fde047; background:rgb(var(--gf-yellow) / .16); }
.dark .lo--grifo .gf-lang-item[aria-current=true] .gf-lang-code { background:rgb(var(--gf-lilac) / .95); }
.dark .lo--grifo .gf-eyebrow::before { background:rgb(var(--gf-lilac) / .95); }
.dark .lo--grifo .gf-cursor path { fill:#f9fafb; stroke:#111827; }
.dark .lo--grifo .gf-role-switch button[aria-pressed=true] { color:#fff; background:#374151; box-shadow:0 1px 2px rgb(0 0 0 / .5); }
.dark .lo--grifo .gf-menu-lang-item[aria-current=true] { color:#fff; background:#374151; box-shadow:0 1px 2px rgb(0 0 0 / .5); }
.dark .lo--grifo .gf-mini-blank { background:#0b1120; }
.dark .lo--grifo .gf-float-bar i { background:linear-gradient(90deg, #818cf8, #6366f1); }
/* Superfícies e seções */
.dark .lo--grifo .gf-btn--ghost:hover { border-color:rgb(129 140 248 / .55); box-shadow:0 1px 2px rgb(0 0 0 / .45), 0 10px 24px -12px rgb(99 102 241 / .6); }
.dark .lo--grifo .gf-lab { box-shadow:0 2px 4px rgb(0 0 0 / .5), 0 40px 80px -28px rgb(0 0 0 / .9), 0 0 110px -36px rgb(99 102 241 / .6); }
.dark .lo--grifo .gf-menu { box-shadow:0 30px 50px -24px rgb(0 0 0 / .8); }
.dark .lo--grifo .gf-stack-band--lilac { background:rgb(var(--gf-lilac) / .42); }
.dark .lo--grifo .gf-stack-band--yellow { background:rgb(var(--gf-yellow) / .78); }
.dark .lo--grifo .gf-band--demo { --hl:var(--gf-lilac); --a:.17; }
.dark .lo--grifo .gf-band--features { --a:.2; }
.dark .lo--grifo .gf-band--final-a { --a:.3; }
.dark .lo--grifo .gf-band--final-b { --a:.24; }
.dark .lo--grifo .gf-band--final-c, .dark .lo--grifo .gf-band--final-d { --a:.24; }
.dark .lo--grifo .gf-pages { --gf-indigo-200:#c7d2fe; --gf-indigo-300:#a5b4fc; background:radial-gradient(70% 60% at 88% 0%, rgb(99 102 241 / .42), transparent 70%), radial-gradient(50% 50% at 0% 100%, rgb(206 147 255 / .2), transparent 70%), #1e1b4b; box-shadow:inset 0 1px 0 rgb(129 140 248 / .3), inset 0 -1px 0 rgb(129 140 248 / .3); }
.dark .lo--grifo .gf-pages .gf-hl--glow { --hl-a:.95; }
.dark .lo--grifo .gf-profile .gf-browser { border-color:rgb(255 255 255 / .14); }
.dark .lo--grifo .gf-tile--quote, .dark .lo--grifo .gf-plan--featured { border-color:rgb(129 140 248 / .5); }
.dark .lo--grifo .gf-plan--featured { color:#e0e7ff; }
.dark .lo--grifo .gf-plan--featured .gf-plan-description, .dark .lo--grifo .gf-plan--featured .gf-price > span { color:#e0e7ff; }
.dark .lo--grifo .gf-final-ticks path { stroke:rgb(var(--gf-yellow) / .95); }