/* ==========================================================================
   Página de LUTs · Cine LUTs (luts.php)
   Porte de mockups-mastercaption/pages/luts.css (prévia aprovada).
   Usa os tokens de /assets/css/rd-mc.css (paleta B · Índigo). Só variáveis de cor.
   Nav e rodapé vêm de includes/header.php e footer.php (estilo no fim do rd-mc.css): nada de .nav*/.footer* aqui,
   a não ser o respiro do rodapé no celular por causa da barra fixa de compra.
   Regra de movimento: só transform/opacity; fora da tela pausa (data-motion).
   ========================================================================== */

/* --dim do design system (#6b6a78) é fraco demais pra texto de verdade (preço riscado, contador, rodapé) */
:root { --dim: #8b8a99; }
picture { display: contents; } /* <picture> não vira caixa: o <img> continua sendo o item posicionado */

.btn--grad { box-shadow: 0 12px 44px rgba(var(--accent-rgb), .55), inset 0 1px 0 rgba(255, 255, 255, .28); }
@media (hover: hover) and (pointer: fine) { .btn--grad:hover { box-shadow: 0 16px 54px rgba(var(--accent-rgb), .7), inset 0 1px 0 rgba(255, 255, 255, .28); } }
.btn .ic { width: 17px; height: 17px; }
.section-head .lead { margin-top: 18px; }
main { display: block; overflow-x: hidden; overflow-x: clip; } /* corta o excesso lateral das entradas 3D sem quebrar o sticky */
@media (min-width: 761px) { .section { padding: 120px 0; } }
.h2 { text-wrap: balance; }
.lead { text-wrap: pretty; }
.section-head .lead, .center .lead { text-wrap: balance; }
.nobr { white-space: nowrap; }
.row { display: flex; align-items: center; gap: 14px; }
.mini-cover { width: 54px; height: 72px; flex: none; border-radius: 8px; object-fit: cover; border: 1px solid var(--line-2); }
.lt-f__sub { display: block; font-size: 13px; font-weight: 500; color: var(--muted); }
a.float { cursor: pointer; }
section[id] { scroll-margin-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
a.float:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }

/* ==========================================================================
   1. HERO · texto + janela do app com antes/depois
   ========================================================================== */
.lt-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 900px; padding: 150px 0 112px; display: flex; align-items: center;
  background: radial-gradient(50% 60% at 72% 50%, rgba(var(--glow-rgb), .28), transparent 70%), var(--bg);
}
.lt-hero__glow { left: 50%; top: 16%; width: 760px; height: 640px; opacity: .42; }
.lt-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent, var(--bg)); } /* termina em fundo puro: sem degrau pra seção de baixo */
.lt-hero .container { max-width: 1280px; }
.lt-hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 60px; align-items: center; }
.lt-hero__title { font-size: clamp(46px, 5.45vw, 78px); }
.lt-hero__copy .lead { margin: 22px 0 0; max-width: 520px; }
.lt-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.lt-hero__checks { justify-content: flex-start; }
.lt-hero__visual { position: relative; }

/* janela estilo app */
.lt-win { border-radius: 26px; overflow: hidden; }
.lt-win__bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.lt-win__bar i { width: 11px; height: 11px; border-radius: 50%; display: block; flex: none; background: #ff5f57; }
.lt-win__bar i:nth-child(2) { background: #febc2e; }
.lt-win__bar i:nth-child(3) { background: #28c840; }
.lt-win__bar span { margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- comparador antes/depois ----------
   A camada "depois" é uma janela que anda (translateX p%) com a foto andando ao contrário (-p%):
   a foto fica parada e só a borda do recorte se move. Tudo transform, nada de clip-path/width. */
.ba { --p: 50; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0d0c12; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.ba__after, .ba__inner, .ba__handle { position: absolute; inset: 0; }
.ba__after { overflow: hidden; transform: translate3d(calc(var(--p) * 1%), 0, 0); transition: opacity .35s ease; }
.ba__inner { transform: translate3d(calc(var(--p) * -1%), 0, 0); }
.ba__handle { z-index: 3; pointer-events: none; transform: translate3d(calc(var(--p) * 1%), 0, 0); transition: opacity .3s ease; }
.ba__handle::before { content: ''; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #fff; box-shadow: 0 0 14px rgba(255, 255, 255, .85); }
.ba__tag {
  position: absolute; top: 14px; z-index: 4; padding: 5px 11px; border-radius: 999px; pointer-events: none;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff;
  background: rgba(6, 6, 12, .62); border: 1px solid rgba(255, 255, 255, .1); transition: opacity .3s ease;
}
.ba__tag--l { left: 14px; }
.ba__tag--r { right: 14px; }

.lt-ba { touch-action: pan-y; cursor: ew-resize; }
.lt-ba .ba__after, .lt-ba .ba__inner, .lt-ba .ba__handle { will-change: transform; }
.ba__knob {
  position: absolute; left: 0; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; pointer-events: auto; cursor: ew-resize; outline: none;
  background: rgba(255, 255, 255, .94); color: #121218; box-shadow: 0 6px 20px rgba(0, 0, 0, .45), 0 0 0 4px rgba(255, 255, 255, .14);
  transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease;
}
.ba__knob .ic { width: 13px; height: 13px; stroke-width: 2.8; margin: 0 -1px; }
.ba__knob:focus-visible { box-shadow: 0 6px 20px rgba(0, 0, 0, .45), 0 0 0 4px rgba(var(--accent-text-rgb), .8); }
.lt-ba.is-drag .ba__knob { transform: scale(1.12); }
@media (hover: hover) and (pointer: fine) { .lt-ba:hover .ba__knob { transform: scale(1.08); } }

/* "Original" esconde a camada do depois. Outras LUTs entram como chips com as fotos reais delas
   (data-after-srcset no chip, ver o comentário no luts.php): nada de cor falsa feita em CSS. */
.lt-ba.is-original .ba__after { opacity: 0 !important; }
.lt-ba.is-original .ba__handle, .lt-ba.is-original .ba__tag--r { opacity: 0; }

/* chips e intensidade */
.lt-win__tools { display: flex; align-items: center; gap: 18px; padding: 14px 18px 16px; }
.lt-chips { display: flex; gap: 8px; }
.lt-chip {
  min-height: 40px; padding: 0 14px; border-radius: 11px; cursor: pointer; white-space: nowrap;
  font: 500 13px/1 var(--font); color: var(--muted); background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
  transition: background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.lt-chip[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: transparent; box-shadow: 0 0 22px rgba(var(--accent-rgb), .6); }
.lt-chip:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .lt-chip:not([aria-pressed="true"]):hover { color: var(--text); border-color: var(--line-2); } }
.lt-int { display: block; width: 190px; margin-left: auto; }
.lt-int__top { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.lt-int output { color: var(--text); font-variant-numeric: tabular-nums; }
.lt-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 26px; margin: 0 0 -6px; padding: 0; background: transparent; cursor: pointer; }
.lt-range:focus { outline: none; }
.lt-range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--slider-end)) 0 0 / var(--v, 80%) 100% no-repeat, rgba(255, 255, 255, .14); }
.lt-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -7px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.lt-range::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .14); }
.lt-range::-moz-range-progress { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--slider-end)); }
.lt-range::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.lt-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(var(--accent-text-rgb), .55); }
.lt-range:disabled { opacity: .35; cursor: not-allowed; }

/* cards flutuantes do hero */
.lt-f { z-index: 6; }
.lt-f--pack { left: -40px; bottom: -92px; --rot: -3deg; }
.lt-f--pack b { display: block; font-size: 16px; letter-spacing: -.01em; line-height: 1.3; }
.lt-f--pill { right: -22px; top: -30px; white-space: nowrap; }

/* ==========================================================================
   2. OS PACKS (do banco)
   ========================================================================== */
@media (min-width: 761px) { .lt-packs { padding-bottom: 64px; } }
.lt-packs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 1040px; margin: 0 auto; align-items: stretch; }
.lt-packs__grid--one { grid-template-columns: minmax(0, 506px); justify-content: center; } /* um pack só: card na largura de sempre, no meio */
.lt-pack, .lt-pack__tilt { height: 100%; }
.lt-pack__card {
  position: relative; height: 100%; display: flex; flex-direction: column; padding: 0; overflow: hidden; border-radius: 32px;
  backdrop-filter: none; -webkit-backdrop-filter: none; /* nada atrás pra desfocar: economiza GPU no celular */
}
.lt-pack--main .lt-pack__card {
  border-color: rgba(var(--accent-text-rgb), .3);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .02) 48%), var(--navy);
  box-shadow: 0 50px 120px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 100px rgba(var(--glow-rgb), .22);
}
.lt-pack--soon .lt-pack__card { background: var(--glass-fill), rgba(12, 13, 28, .9); box-shadow: 0 40px 100px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06); }
.lt-pack__stage { position: relative; isolation: isolate; height: 380px; overflow: hidden; display: grid; place-items: center; }
.lt-pack__bg { position: absolute; z-index: -2; left: -12%; top: -12%; width: 124%; height: 118%; max-width: none; object-fit: cover; filter: blur(14px) saturate(1.15); opacity: .5;
  -webkit-mask: linear-gradient(180deg, #000 35%, transparent 96%); mask: linear-gradient(180deg, #000 35%, transparent 96%); }
.lt-pack__stage::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(46% 44% at 50% 48%, rgba(var(--glow-rgb), .35), transparent 75%); }
.lt-pack--soon .lt-pack__stage::after { background: radial-gradient(46% 44% at 50% 48%, rgba(var(--glow-rgb), .16), transparent 75%); }
.lt-pack__bob { width: 228px; }
.lt-pack__cover { width: 100%; height: auto; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 34px 60px rgba(0, 0, 0, .6), 0 0 60px rgba(var(--glow-rgb), .22); }
.lt-pack--soon .lt-pack__cover { opacity: .9; }
.lt-pack__badge { position: absolute; left: 20px; top: 20px; z-index: 2; background: rgba(10, 11, 26, .78); }
.lt-pack--main .lt-pack__badge { color: #fff; background: var(--accent); border-color: transparent; box-shadow: 0 8px 24px rgba(var(--accent-rgb), .5); }
.lt-pack__badge .ic { width: 12px; height: 12px; }
.lt-pack__body { flex: 1; display: flex; flex-direction: column; padding: 26px 32px 30px; }
.lt-pack__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lt-pack__head h3 { font-size: 26px; letter-spacing: -.035em; line-height: 1.15; }
.lt-pack__head h3 a { color: inherit; text-decoration: none; } /* título leva pra página do pack (lut.php), sem mudar o visual */
@media (hover: hover) and (pointer: fine) { .lt-pack__head h3 a:hover { color: var(--accent-text); } }
.lt-pack__head h3 a:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 4px; }
.lt-pack__meta { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--muted); border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); }
.lt-pack__desc { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--muted); }

.lt-price { margin: auto 0 22px; padding-top: 22px; }
.lt-price__old { display: block; font-size: 15px; color: var(--dim); text-decoration: line-through; }
.lt-price__row { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.lt-price__val { display: flex; align-items: flex-start; font-size: 76px; font-weight: 700; line-height: 1; letter-spacing: -.05em; }
.lt-price__rs { margin: 10px 6px 0 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.lt-price__cents { margin-top: 8px; font-size: 32px; letter-spacing: -.03em; }
.lt-price__off { padding: 6px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff; background: rgba(var(--accent-rgb), .3); border: 1px solid rgba(var(--accent-text-rgb), .45); }
.lt-pack__fine { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; color: var(--muted); }
.lt-pack__fine li { display: flex; align-items: center; gap: 9px; }
.lt-pack__fine .ic { width: 15px; height: 15px; color: var(--accent-text); stroke-width: 2.4; }

.lt-spec { margin: 22px 0 26px; display: grid; gap: 1px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--line); }
.lt-spec > div { padding: 14px 16px; background: rgba(10, 11, 26, .92); }
.lt-spec dt { margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.lt-spec dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lt-spec dd span { padding: 6px 11px; border-radius: 10px; font-size: 13px; font-weight: 500; color: #c9c8d6; background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); }
.lt-spec > div:first-child dd span { color: var(--accent-text); border-color: rgba(var(--accent-text-rgb), .32); background: var(--accent-soft); }
.lt-spec--main { margin: 20px 0 0; }
@media (min-width: 1000px) { /* card largo: rótulo e chips na mesma linha, os dois cards ficam da mesma altura */
  .lt-spec--main > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 16px; }
  .lt-spec--main dt { margin: 0; }
}
.lt-pack__soon { margin-top: auto; cursor: not-allowed; opacity: .75; }
.lt-pack__soon:hover { transform: none; }
.lt-pack__note { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--dim); }

/* banco vazio ou fora do ar: aviso no lugar dos cards */
.lt-packs__empty { max-width: 560px; margin: 0 auto; padding: 36px 32px; border-radius: 28px; text-align: center; }
.lt-packs__empty p { margin: 0 0 20px; font-size: 17px; color: var(--muted); }

/* ==========================================================================
   3. AS CORES DO RAI · composição em --u (1440 de referência), como o hero do curso
   ========================================================================== */
.lt-rai {
  --u: min(1px, calc(100vw / 1440));
  position: relative; isolation: isolate; overflow: hidden; padding: 64px 0 72px; background: var(--bg); /* 64px em cima: o halo do recorte não bate no corte da seção */
}
.lt-rai__stage { position: relative; width: calc(1440 * var(--u)); height: calc(860 * var(--u)); margin: 0 auto; }
/* a luz fica dentro do palco: termina embaixo do degradê, sem faixa clara depois do texto */
.lt-rai__stage::before { content: ''; position: absolute; top: 0; bottom: 0; left: -50vw; right: -50vw; pointer-events: none; /* luz índigo só com gradiente (sem .glow com blur: o blur vazava pra cima e o overflow cortava reto) */
  background: radial-gradient(calc(760 * var(--u)) 52% at 50% 52%, rgba(var(--glow-rgb), .5), rgba(var(--glow-rgb), .14) 48%, transparent 76%), radial-gradient(calc(300 * var(--u)) 30% at 72% 62%, rgba(var(--glow2-rgb), .22), transparent 72%); }
.lt-rai__word {
  position: absolute; left: 0; right: 0; top: calc(92 * var(--u)); z-index: 1; margin: 0; text-align: center; pointer-events: none;
  font-size: calc(306 * var(--u)); word-spacing: .75em; white-space: nowrap;
}
.lt-rai__person {
  position: absolute; z-index: 2; bottom: 0; left: calc(384 * var(--u)); width: calc(628 * var(--u)); height: auto; max-width: none;
  filter: drop-shadow(0 0 60px rgba(var(--glow-rgb), .45));
}
/* o degradê passa 90px do pé do palco: cobre o halo do drop-shadow que vaza embaixo do recorte */
.lt-rai__fade { position: absolute; left: -100vw; right: -100vw; bottom: -90px; height: calc(320 * var(--u) + 90px); z-index: 3; pointer-events: none; background: linear-gradient(180deg, transparent, var(--bg) calc(100% - 110px)); }
.lt-rai__wires { width: 100%; height: 100%; }

.lt-rai .float { font-size: max(11.5px, calc(15 * var(--u))); padding: calc(16 * var(--u)) calc(20 * var(--u)); border-radius: calc(18 * var(--u)); line-height: 1.45; }
.lt-rai .float__label { font-size: .8em; margin-bottom: .5em; }
.lt-rf .row { gap: .9em; }
.lt-rf .mini-cover { width: 3.6em; height: 4.8em; border-radius: .55em; }
.lt-rf .lt-f__sub { font-size: .87em; }
.lt-rf__big { display: block; font-size: 1.13em; letter-spacing: -.01em; line-height: 1.25; }
.lt-rf__lab { color: rgba(255, 255, 255, .78); }
.lt-rf--prod { left: calc(110 * var(--u)); top: calc(440 * var(--u)); --rot: -2deg; }
.lt-rf--int { left: calc(150 * var(--u)); top: calc(640 * var(--u)); width: 15em; --rot: 2deg; }
.lt-rf__row { display: flex; justify-content: space-between; align-items: baseline; }
.lt-rf--int .float__label { margin: 0; }
.lt-rf--pack { left: calc(1062 * var(--u)); top: calc(330 * var(--u)); --rot: 2deg; }
.lt-rf--compat { left: calc(1010 * var(--u)); top: calc(552 * var(--u)); }
.lt-rf--compat b { font-size: 1.02em; white-space: nowrap; }
.lt-rn--1 { left: calc(241 * var(--u)); top: calc(523 * var(--u)); }
.lt-rn--2 { left: calc(1191 * var(--u)); top: calc(445 * var(--u)); }

.lt-rai__copy { position: relative; z-index: 4; margin-top: calc(-120 * var(--u)); text-align: center; }
.lt-rai__copy .h2 { max-width: min(880px, 16em); margin: 0 auto; }
.lt-rai__copy .lead { margin: 20px auto 0; max-width: 640px; }

/* ---------- "LUT aplicada" de verdade: o card controla a cor da foto ----------
   Duas camadas da MESMA foto (mesma URL, um download só): embaixo a versão "sem LUT" (filtro fixo, chapada como LOG),
   por cima a versão com cor, cuja OPACIDADE é o valor do controle (--look, 0 a 1). Nada de animar filter:
   o filtro é fixo (desenha uma vez) e o arrasto só mexe em opacidade (compositor). Só onde o card aparece (> 960px). */
.lt-rai__stage { --look: .8; }
.lt-rai__person.lt-rai__look { display: none; } /* 2 classes: ganha do display:block do celular */
@media (min-width: 961px) {
  .lt-rai__person { filter: saturate(.34) contrast(.8) brightness(1.07) drop-shadow(0 0 60px rgba(var(--glow-rgb), .45)); }
  .lt-rai__person.lt-rai__look { display: block; filter: saturate(1.08) contrast(1.04); opacity: var(--look); will-change: opacity; }
}
.lt-rf--int { cursor: default; } /* label absoluto: já vira bloco sozinho (sem display aqui, pra não ganhar do display:none do celular) */
.lt-rf--int b { min-width: 2.7em; text-align: right; font-variant-numeric: tabular-nums; }
.lt-rf__range { margin: .5em 0 -.3em; }
.lt-rf--int:focus-within, .lt-rf--int.is-drag { animation-play-state: paused; } /* não foge do dedo/mouse enquanto arrasta */
.lt-rf--int:focus-within::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .lt-rf--int:hover { scale: 1; } } /* sem crescer embaixo do cursor */
.lt-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(var(--accent-text-rgb), .55); }

/* ==========================================================================
   Ferramentas de cor do Final Cut flutuando (Vectorscope, RGB Parade, Color Wheels, Color Curves)
   Card de vidro do site + "tela" escura de scope do FCP, tudo em SVG/CSS inline (sem imagem). Decorativos (aria-hidden).
   Sem backdrop-filter: ficam sobre fundo escuro liso, então o preenchimento quase opaco dá o mesmo vidro sem custo de GPU.
   Tamanhos em em: o card inteiro escala pelo font-size.
   ========================================================================== */
.lt-tool {
  padding: .55em .55em .6em; border-radius: 1.05em; line-height: 1; font-size: 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .02)), rgba(17, 16, 25, .9);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.lt-tool__bar { display: flex; align-items: center; justify-content: space-between; gap: .9em; padding: .2em .35em .6em; font-size: .9em; font-weight: 500; color: #8c8b99; white-space: nowrap; }
.lt-tool__bar b { font-weight: 600; color: #e9e8f0; letter-spacing: -.005em; }
.lt-tool__screen { position: relative; display: block; border-radius: .6em; overflow: hidden; background: #0b0b0f; border: 1px solid rgba(255, 255, 255, .07); box-shadow: inset 0 1px 8px rgba(0, 0, 0, .65); }
.lt-tool svg { display: block; width: 100%; height: auto; overflow: hidden; }
.lt-tool text { font-family: var(--font); }
.lt-scope__g path, .lt-scope__g circle { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Vectorscope: anel de cor (o mesmo giro de matiz do FCP: R em cima, YL à esquerda, G embaixo, B à direita),
   retícula, alvos, linha de tom de pele e o traço lilás */
.lt-vs-box { width: 12.4em; aspect-ratio: 1; }
.lt-vs__ring {
  position: absolute; inset: 6.25%; border-radius: 50%; opacity: .9;
  background: conic-gradient(from -13deg, #e0525c, #c257cf 42deg, #5263ea 116deg, #3dbbd4 180deg, #40cd6c 222deg, #d8c54b 296deg, #e0525c);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2.4px)); mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2.4px));
}
.lt-vs { position: relative; }
.lt-vs__skin { stroke: rgba(255, 255, 255, .42); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lt-vs__box { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lt-vs__lab text { font-size: 7.4px; font-weight: 600; fill: rgba(255, 255, 255, .4); text-anchor: middle; }
.lt-vs__trace { transform: scale(calc(.32 + .68 * var(--look, .8))); transform-origin: 80px 80px; }
.lt-vs__trace path { fill: none; stroke: #c9c0ff; stroke-width: 1.45; stroke-linecap: round; opacity: .85; }
.lt-vs__glow { fill: rgba(var(--accent-text-rgb), .2); }

/* Waveform em RGB Parade: 3 colunas (R, G, B) com escala 0 a 100 */
.lt-rf--pd .lt-tool__screen { width: 17.6em; padding: .45em .2em .1em 0; }
.lt-pd__lab text { font-size: 7px; font-weight: 500; fill: rgba(255, 255, 255, .36); text-anchor: end; }
.lt-pd__ch text { text-anchor: middle; font-size: 7.4px; fill: rgba(255, 255, 255, .42); }
.lt-pd__trace { transform: scaleY(calc(.55 + .45 * var(--look, .8))); transform-origin: 0 62px; }
.lt-pd__trace path { fill: none; stroke-width: 1.05; opacity: .42; }
.lt-pd__trace .lt-pd__core { stroke-width: .95; opacity: .9; }
.lt-pd__r { stroke: #ff4f61; } .lt-pd__r.lt-pd__core { stroke: #ff9aa5; }
.lt-pd__g { stroke: #37df88; } .lt-pd__g.lt-pd__core { stroke: #9af3c3; }
.lt-pd__b { stroke: #4f8bff; } .lt-pd__b.lt-pd__core { stroke: #a6c4ff; }

/* Color Wheels: Shadows, Midtones, Highlights com o ponto (puck) puxado pro look frio/quente */
.lt-tool--cw .lt-tool__screen { width: 16.4em; }
.lt-cw { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7em; padding: .8em .75em .65em; }
.lt-cw__item { display: flex; flex-direction: column; align-items: center; gap: .55em; min-width: 0; }
.lt-cw__w {
  position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, #23222b 0%, rgba(35, 34, 43, .62) 46%, rgba(35, 34, 43, 0) 100%),
    conic-gradient(from -13deg, #c64c56, #ab4fb8 42deg, #4a59cf 116deg, #38a6bd 180deg, #3bb562 222deg, #c0b046 296deg, #c64c56);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 .3em rgba(255, 255, 255, .03);
}
.lt-cw__w::before { /* retícula: cruz fina no centro */
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .16)) 50% 50% / 1px 100% no-repeat, linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .16)) 50% 50% / 100% 1px no-repeat;
}
.lt-cw__w i { position: absolute; left: calc(50% + var(--x) * 1%); top: calc(50% + var(--y) * 1%); width: 22%; height: 22%; margin: -11% 0 0 -11%; border-radius: 50%; border: 1.5px solid #fff; background: rgba(12, 12, 16, .6); box-shadow: 0 0 6px rgba(0, 0, 0, .7); }
.lt-cw small { font-size: .6em; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #8e8d9a; }

/* Color Curves: luma (branca) em S + R, G, B */
.lt-tool--cc .lt-tool__screen { width: 12.4em; padding: .55em; }
.lt-cc { border-radius: .2em; }
.lt-cc path { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.lt-cc .lt-cc__diag { stroke: rgba(255, 255, 255, .16); stroke-dasharray: 3 3; }
.lt-cc__l { stroke: #f4f3f8; } .lt-cc__r { stroke: #ff5d6c; opacity: .9; } .lt-cc__g { stroke: #46d98a; opacity: .5; } .lt-cc__b { stroke: #5b8cff; opacity: .9; }
.lt-cc__pts circle { fill: #fff; stroke: #0b0b0f; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lt-cc__keys { display: flex; gap: .4em; }
.lt-cc__keys i { width: .62em; height: .62em; border-radius: 50%; background: #f4f3f8; }
.lt-cc__keys i:nth-child(2) { background: #ff5d6c; } .lt-cc__keys i:nth-child(3) { background: #46d98a; } .lt-cc__keys i:nth-child(4) { background: #5b8cff; }

/* no palco CINE LUTS: escalam com --u como os outros cards; ligados por fio pontilhado ao card de cima */
.lt-rai .lt-tool { font-size: max(10.5px, calc(13 * var(--u))); padding: .55em .55em .6em; border-radius: 1.05em; line-height: 1; }
.lt-rf--pd { left: calc(78 * var(--u)); top: calc(798 * var(--u)); --rot: -2deg; }
.lt-rf--vs { left: calc(1140 * var(--u)); top: calc(704 * var(--u)); --rot: 2.5deg; }
.lt-rn--3 { left: calc(307 * var(--u)); top: calc(725 * var(--u)); }
.lt-rn--4 { left: calc(1185 * var(--u)); top: calc(639 * var(--u)); }

/* ==========================================================================
   4. GALERIA ANTES E DEPOIS · 3 recortes da mesma cena, varrendo sozinhos
   ========================================================================== */
.lt-gal { overflow: hidden; }
.lt-gal .section-head { margin-bottom: 56px; }
.lt-gal__wrap { max-width: 1152px; margin: 0 auto; padding: 0 var(--gutter); }
.lt-gal__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; outline: none; }
.lt-gal__track:focus-visible { box-shadow: 0 0 0 2px var(--accent-text); border-radius: 26px; }
.lt-det { margin: 0; }
.lt-det__ba {
  /* recorte: --cx/--cy = canto do recorte, --cw/--ch = tamanho, em frações da foto 16:9 (caixa 4:5) */
  aspect-ratio: 4 / 5; border-radius: 26px; border: 1px solid var(--line-2); isolation: isolate;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55); transition: transform .5s cubic-bezier(.2, .7, .3, 1), border-color .5s ease, box-shadow .5s ease;
}
.lt-det__ba .ba__img { inset: auto; left: calc(var(--cx) / var(--cw) * -100%); top: calc(var(--cy) / var(--ch) * -100%); width: calc(100% / var(--cw)); height: auto; max-width: none; object-fit: fill; }
.lt-det__ba--pele   { --cx: .07; --cy: .15; --cw: .38; --ch: .8444; }
.lt-det__ba--luz    { --cx: .555; --cy: .02; --cw: .44; --ch: .9778; }
.lt-det__ba--sombra { --cx: .37; --cy: .07; --cw: .32; --ch: .7111; }
.lt-det__ba .ba__handle::after { /* bolinha decorativa (aqui não arrasta: varre sozinho) */
  content: ''; position: absolute; left: -15px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); box-shadow: 0 4px 14px rgba(0, 0, 0, .4), 0 0 0 4px rgba(255, 255, 255, .14);
}
.lt-det__ba .ba__after, .lt-det__ba .ba__handle { animation: lt-sweep 5.6s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.lt-det__ba .ba__inner { animation: lt-sweep-in 5.6s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.lt-det:nth-child(2) .lt-det__ba > *, .lt-det:nth-child(2) .ba__inner { animation-delay: -1.9s; }
.lt-det:nth-child(3) .lt-det__ba > *, .lt-det:nth-child(3) .ba__inner { animation-delay: -3.8s; }
@keyframes lt-sweep { from { transform: translate3d(16%, 0, 0); } to { transform: translate3d(84%, 0, 0); } }
@keyframes lt-sweep-in { from { transform: translate3d(-16%, 0, 0); } to { transform: translate3d(-84%, 0, 0); } }
@media (hover: hover) and (pointer: fine) {
  .lt-det:hover .lt-det__ba > *, .lt-det:hover .ba__inner { animation-play-state: paused; }
  .lt-det:hover .lt-det__ba { transform: translateY(-6px) scale(1.02); border-color: rgba(var(--accent-text-rgb), .5); box-shadow: 0 40px 80px rgba(0, 0, 0, .6), 0 0 60px rgba(var(--glow-rgb), .3); }
}
.lt-det figcaption { padding: 22px 6px 0; }
.lt-det__k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.lt-det h3 { margin: 8px 0 6px; font-size: 21px; letter-spacing: -.03em; line-height: 1.2; }
.lt-det p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.lt-gal__nav { display: none; }
.lt-buyrow { margin-top: 56px; }
.lt-buyrow .small { margin: 14px 0 0; }

/* ferramentas de cor ao lado do título (computador). Medidas em --u (1440 de referência), como o palco CINE LUTS */
.lt-gal { --u: min(1px, calc(100vw / 1440)); }
.lt-gal__tools { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lt-gal__tools .float { pointer-events: auto; }
.lt-gal .lt-tool { font-size: max(10.5px, calc(13 * var(--u))); }
.lt-tool--cw { left: calc(50% - 660 * var(--u)); top: 150px; --rot: -3deg; }
.lt-tool--cc { left: calc(50% + 450 * var(--u)); top: 98px; --rot: 3deg; }

/* ==========================================================================
   5. COMO FUNCIONA A COMPRA · stepper que avança sozinho + perguntas
   ========================================================================== */
.lt-how { overflow-x: clip; }
@media (min-width: 761px) { .lt-how { padding-top: 104px; } }
.lt-how__glow { left: 50%; top: 18%; width: 900px; height: 520px; margin-left: -450px; opacity: .3; }
.lt-stepper { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; }
.lt-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lt-step { position: relative; isolation: isolate; padding: 26px 24px 28px; border-radius: 24px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.lt-step::before { /* fundo aceso: só opacidade */
  content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity .6s ease;
  border: 1px solid rgba(var(--accent-text-rgb), .45); background: linear-gradient(180deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .03));
  box-shadow: 0 20px 60px rgba(var(--glow-rgb), .18);
}
.lt-step.is-on::before { opacity: 1; }
.lt-step__n {
  position: relative; isolation: isolate; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px;
  color: var(--accent-text); background: var(--accent-soft); border: 1px solid rgba(var(--accent-text-rgb), .3); transition: color .4s ease;
}
.lt-step__n::after { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: 50%; background: var(--accent); box-shadow: 0 0 20px rgba(var(--accent-rgb), .7); opacity: 0; transition: opacity .4s ease; }
.lt-step.is-on .lt-step__n, .lt-step.is-done .lt-step__n { color: #fff; }
.lt-step.is-on .lt-step__n::after, .lt-step.is-done .lt-step__n::after { opacity: 1; }
.lt-step.is-done .lt-step__n::after { box-shadow: none; opacity: .55; }
.lt-step__ico { position: absolute; right: 22px; top: 24px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); transition: color .4s ease; }
.lt-step__ico .ic { width: 19px; height: 19px; }
.lt-step.is-on .lt-step__ico { color: var(--accent-text); }
.lt-step b { display: block; margin: 20px 0 6px; font-size: 18px; letter-spacing: -.02em; line-height: 1.25; }
.lt-step__t { display: block; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.lt-steps__bar { position: relative; height: 3px; margin: 22px 8px 0; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .07); }
.lt-steps__bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--slider-end)); box-shadow: 0 0 14px rgba(var(--accent-rgb), .8); transform-origin: 0 50%; transform: scaleX(.25); transition: transform .9s cubic-bezier(.2, .75, .25, 1); }

.lt-faq { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 72px; align-items: start; max-width: 1120px; margin: 110px auto 0; }
.lt-faq__head .h3 { font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -.04em; line-height: 1.12; margin-bottom: 26px; }
.lt-faq__head .eyebrow { margin-bottom: 14px; }
.faq details { transition: border-color .3s ease, background .3s ease; }
.faq details[open] { background: rgba(255, 255, 255, .04); border-color: rgba(var(--accent-text-rgb), .26); }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--accent-text); } }

/* ==========================================================================
   6. CTA PRO CURSO (bônus Coloração Avançada)
   ========================================================================== */
.lt-course { padding-top: 40px; }
.lt-course__card { padding: 64px 64px 64px 72px; text-align: left; }
.lt-course__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); gap: 32px; align-items: center; }
.lt-course .h2 { font-size: clamp(34px, 3.9vw, 54px); }
.lt-course__text .lead { margin: 20px 0 30px; max-width: 520px; }
.lt-course__text .lead b { color: var(--text); font-weight: 600; }
.lt-course__checks { justify-content: flex-start; }
.lt-course__btn { padding: 0 34px; }
.lt-course__visual { position: relative; height: 430px; }
.lt-course__bob { position: absolute; left: 50%; top: 50%; width: 248px; margin: -186px 0 0 -124px; }
.lt-course__cover { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line-2); transform: rotate(-4deg); box-shadow: 0 40px 80px rgba(0, 0, 0, .6), 0 0 90px rgba(var(--glow-rgb), .32); }
.lt-course__f { right: 0; bottom: 46px; --rot: 3deg; } /* abaixo do queixo da capa */
.lt-course__f b { display: block; font-size: 16px; }
.lt-course__f2 { left: -40px; top: 344px; /* desce pro braço e sai da altura do rosto */ display: flex; align-items: center; gap: 12px; --rot: -2deg; }
.lt-course__f2 .ic { width: 22px; height: 22px; color: var(--accent-text); }
.lt-course__f2 b { display: block; font-size: 15px; line-height: 1.3; }

/* barra fixa de compra (celular) */
.buybar b { font-size: 15.5px; }
.buybar .btn .ic { width: 15px; height: 15px; }

/* ==========================================================================
   Print (.is-shot) e movimento reduzido
   ========================================================================== */
.is-shot .lt-det__ba .ba__after, .is-shot .lt-det__ba .ba__handle { animation: none; transform: translate3d(50%, 0, 0); }
.is-shot .lt-det__ba .ba__inner { animation: none; transform: translate3d(-50%, 0, 0); }
.is-shot .lt-step::before, .is-shot .lt-steps__bar i { transition: none; }
.is-shot .lt-rai__stage { --look: .8 !important; }
@media (prefers-reduced-motion: reduce) {
  .lt-det__ba .ba__after, .lt-det__ba .ba__handle { animation: none; transform: translate3d(50%, 0, 0); }
  .lt-det__ba .ba__inner { animation: none; transform: translate3d(-50%, 0, 0); }
  .lt-det__ba, .ba__knob { transition: none; }
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
/* iPad paisagem e notebooks pequenos: 2 colunas apertadas */
@media (max-width: 1180px) {
  .lt-hero { min-height: 0; padding: 140px 0 132px; }
  .lt-hero__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: 44px; }
  .lt-int { width: 150px; }
  .lt-f--pack { left: -18px; }
  .lt-f--pill { right: -8px; }
}
@media (max-width: 1100px) {
  .lt-chip { padding: 0 12px; }
  .lt-win__tools { gap: 14px; padding: 12px 14px 14px; }
}
@media (max-width: 1024px) {
  .lt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt-steps__bar { display: none; }
  .lt-course__card { padding: 56px 40px; }
}

/* iPad retrato: hero em uma coluna, centrado (texto primeiro, janela depois) */
@media (max-width: 960px) {
  .lt-hero { padding: 132px 0 128px; }
  .lt-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .lt-hero__copy { text-align: center; }
  .lt-hero__copy .lead { margin-left: auto; margin-right: auto; max-width: 600px; text-wrap: balance; }
  .lt-hero__btns, .lt-hero__checks { justify-content: center; }
  .lt-hero__title { font-size: clamp(46px, 8.4vw, 76px); }
  .lt-hero__visual { width: 100%; max-width: 680px; margin: 0 auto; }
  .lt-f--pack { left: -14px; bottom: -104px; }
  .lt-f--pill { right: -10px; top: -28px; }
  .lt-int { width: 170px; }
  .lt-faq { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 88px; }
  .lt-faq__head { text-align: center; }
}
/* abaixo de 1280 o RGB Parade encosta no texto do "As cores que eu uso": fica só o Vectorscope no palco */
@media (max-width: 1279px) {
  .lt-rf--pd, .lt-rn--3, .lt-rai__wires path:nth-child(3) { display: none; }
}
@media (min-width: 961px) and (max-width: 1180px) {
  .lt-rf--vs { top: calc(688 * var(--u)); }
}
/* iPad e notebook pequeno: as ferramentas da galeria sobem pros cantos de cima (ao lado do título não cabem) */
@media (min-width: 761px) and (max-width: 1099px) {
  .lt-tool--cw { left: var(--gutter); top: 30px; }
  .lt-tool--cc { left: auto; right: var(--gutter); top: 22px; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .lt-rf--int { display: none; }
  .lt-rn--1, .lt-rai__wires path:nth-child(1) { display: none; }
  .lt-rf--prod { top: calc(520 * var(--u)); left: calc(70 * var(--u)); }
  .lt-rf--pack { left: auto; right: calc(40 * var(--u)); top: calc(300 * var(--u)); }
  .lt-rf--compat { left: auto; right: calc(40 * var(--u)); top: calc(600 * var(--u)); }
  .lt-rn--2, .lt-rai__wires path:nth-child(2) { display: none; }
  /* ferramentas: só o Vectorscope, embaixo do "Produtora própria" (o RGB Parade não cabe ao lado do título) */
  .lt-rf--pd, .lt-rn--3, .lt-rn--4, .lt-rai__wires path:nth-child(3), .lt-rai__wires path:nth-child(4) { display: none; }
  .lt-rf--vs { left: calc(96 * var(--u)); top: calc(668 * var(--u)); --rot: -2.5deg; }
  .lt-det h3 { font-size: 18px; }
  .lt-det p { font-size: 14px; }
  .lt-gal__track { gap: 16px; }
  .lt-course__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; text-align: center; }
  .lt-course__text .lead { margin-left: auto; margin-right: auto; }
  .lt-course__checks { justify-content: center; }
  .lt-course__visual { height: 400px; max-width: 520px; width: 100%; margin: 0 auto; }
  .lt-course__f { bottom: 24px; }
  .lt-course__f2 { left: 0; top: 300px; }
}

@media (max-width: 760px) {
  .section { padding: 80px 0; }
  .h2 { font-size: 32px; }

  /* hero */
  .lt-hero { padding: 104px 0 104px; }
  .lt-hero__glow { left: -20%; top: 40%; width: 140%; height: 420px; }
  .lt-hero__grid { gap: 40px; }
  .lt-hero__title { font-size: 12.2vw; }
  .lt-hero__copy .lead { font-size: 17px; margin-top: 18px; }
  .lt-hero__btns { flex-wrap: nowrap; gap: 10px; margin-top: 26px; }
  .lt-hero__btns .btn { flex: 1 1 0; min-width: 0; height: 54px; padding: 0 12px; font-size: 15px; }
  .lt-hero__checks { gap: 6px 16px; margin-top: 18px; font-size: 12.5px; }
  .lt-win { border-radius: 20px; }
  .lt-win__bar { padding: 11px 14px; font-size: 12px; }
  .lt-win__bar i { width: 9px; height: 9px; }
  .ba__tag { top: 10px; padding: 4px 9px; font-size: 10px; }
  .ba__tag--l { left: 10px; } .ba__tag--r { right: 10px; }
  .ba__knob { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .lt-win__tools { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 12px 14px; }
  .lt-chips { gap: 6px; }
  .lt-chip { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 6px; font-size: 13px; border-radius: 12px; }
  .lt-int { width: auto; margin: 0 4px; }
  .lt-range { height: 32px; margin-bottom: -6px; }
  .lt-f--pack { left: -6px; bottom: -64px; padding: 10px 14px 10px 10px; }
  .lt-f--pack .mini-cover { width: 40px; height: 54px; }
  .lt-f--pack b { font-size: 14px; }
  .lt-f--pack .lt-f__sub { font-size: 12px; }
  .lt-f--pill { right: -4px; top: -24px; padding: 9px 13px; font-size: 13px; }

  /* packs */
  .lt-packs__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 460px; }
  .lt-pack__stage { height: 330px; }
  .lt-pack__bob { width: 196px; }
  .lt-pack__body { padding: 22px 22px 24px; }
  .lt-pack__head h3 { font-size: 23px; }
  .lt-price__val { font-size: 68px; }
  .lt-price__cents { font-size: 28px; }
  .lt-packs__empty { padding: 28px 22px; }

  /* as cores do Rai: palavra proporcional à largura, Rai na frente, 2 cards pequenos */
  .lt-rai { padding: 0 0 60px; }
  .lt-rai__stage { width: auto; height: auto; padding-top: 72px; }
  .lt-rai__stage::before { background: radial-gradient(76vw 290px at 50% 50%, rgba(var(--glow-rgb), .5), rgba(var(--glow-rgb), .14) 48%, transparent 76%); }
  .lt-rai__word { position: relative; top: 0; font-size: 20.5vw; word-spacing: .42em; }
  .lt-rai__person { position: relative; display: block; left: auto; width: 104vw; margin: -9vw 0 0 -8.4vw; filter: drop-shadow(0 0 40px rgba(var(--glow-rgb), .45)); }
  .lt-rai__fade { height: 280px; }
  .lt-rai__wires, .lt-rn, .lt-rf--int, .lt-rf--compat, .lt-rf--pd, .lt-rf--vs { display: none; }
  .lt-rai .float { font-size: 12.5px; padding: 10px 13px; border-radius: 14px; }
  .lt-rf--prod { left: 8px; top: auto; bottom: 9vw; }
  .lt-rf--pack { left: auto; right: 8px; top: auto; bottom: 31vw; }
  .lt-rf--pack .float__label { display: none; }
  .lt-rf .mini-cover { width: 34px; height: 46px; }
  .lt-rai__copy { margin-top: -28px; text-align: left; }
  .lt-rai__copy .lead { margin-left: 0; font-size: 16.5px; }

  /* galeria: vira trilho com arrasto (scroll-snap), setas e contador */
  .lt-gal .section-head { margin-bottom: 36px; }
  .lt-gal__wrap { padding: 0; }
  .lt-gal__track {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    padding: 0 var(--gutter) 6px; scroll-padding: 0 var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .lt-gal__track::-webkit-scrollbar { display: none; }
  .lt-det { flex: 0 0 80%; scroll-snap-align: start; }
  .lt-det__ba { border-radius: 22px; }
  .lt-det h3 { font-size: 19px; }
  .lt-det p { font-size: 14.5px; }
  .lt-gal__nav { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 22px; }
  /* ferramentas de cor: entram no fluxo, lado a lado, entre o título e os recortes */
  .lt-gal__tools { position: relative; inset: auto; display: flex; justify-content: center; align-items: flex-start; gap: 12px; padding: 0 var(--gutter); margin: -10px 0 30px; }
  .lt-gal .lt-tool { position: relative; left: auto; right: auto; top: auto; font-size: 10px; }
  .lt-cw small { display: none; }
  .lt-gal__count { margin: 0; min-width: 56px; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .16em; color: var(--muted); font-variant-numeric: tabular-nums; }
  .lt-gal__nav .c3d__arrow { width: 52px; height: 52px; }
  .lt-buyrow { margin-top: 40px; }
  .lt-buyrow .btn { width: 100%; max-width: 380px; }

  /* como funciona */
  .lt-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .lt-step { display: grid; grid-template-columns: 36px 1fr; column-gap: 16px; padding: 18px 18px 18px; border-radius: 20px; }
  .lt-step__n { grid-row: 1 / 3; align-self: start; }
  .lt-step b { margin: 6px 0 4px; font-size: 17px; padding-right: 44px; }
  .lt-step__t { grid-column: 2; font-size: 14px; }
  .lt-step__ico { right: 16px; top: 16px; width: 34px; height: 34px; border-radius: 10px; }
  .lt-step__ico .ic { width: 17px; height: 17px; }
  .lt-faq { margin-top: 72px; }
  .lt-faq__head { text-align: left; }
  .lt-faq .faq details { padding: 0 18px; }
  .lt-faq .faq summary { font-size: 16px; padding: 18px 0; }

  /* CTA do curso */
  .lt-course { padding-top: 10px; }
  .lt-course__card { padding: 56px 20px 40px; }
  .lt-course .h2 { font-size: 32px; } /* 2 linhas: "suas próprias cores." cabe inteira */
  .lt-course__grid { grid-template-columns: minmax(0, 1fr); gap: 4px; text-align: center; }
  .lt-course__text .lead { margin: 18px auto 26px; font-size: 16px; }
  .lt-course__btn { width: 100%; padding: 0 18px; }
  .lt-course__checks { justify-content: center; gap: 6px 16px; font-size: 12.5px; }
  .lt-course__visual { height: 330px; }
  .lt-course__bob { width: 178px; margin: -136px 0 0 -89px; }
  .lt-course .float { font-size: 12.5px; padding: 10px 13px; }
  .lt-course__f { right: 0; bottom: 6px; }
  .lt-course__f b { font-size: 14px; }
  .lt-course__f2 { display: none; } /* no celular os 2 cards não cabem lado a lado sem cobrir o rosto da capa; "11 módulos" já está nos checks */

  .lt-has-bar .footer { padding-bottom: 110px; } /* espaço pra barra fixa de compra não cobrir o fim do rodapé */
}
/* toque (celular e iPad, inclusive o iPad paisagem em 1180): alvos com pelo menos 44px */
@media (max-width: 760px), (pointer: coarse) {
  .lt-chip { min-height: 44px; }
  .lt-range { height: 44px; margin: -9px 0 -15px; }
}
@media (max-width: 370px) {
  .lt-course .h2 { font-size: 30px; }
  .lt-hero__btns .btn { font-size: 14px; }
}