/* ============================================================
   LEV DESIGN, SISTEMA
   Uma folha para o site inteiro. Não escreva CSS solto nas
   páginas: se um componente não existe aqui, adicione aqui.

   Ordem do arquivo:
     1. Fonte
     2. Tokens
     3. Reset e base
     4. Layout
     5. Tipografia
     6. Superfície e elevação
     7. Navegação
     8. Botões
     9. Formulários
    10. Cards
    11. Marca
    12. Estados
    13. Utilitários
   ============================================================ */

/* ---------- 1. FONTE ------------------------------------- */
/* General Sans servida daqui (assets/fonts/), nao mais pela Fontshare.
   O @import externo bloqueava a renderizacao e dependia de um CDN de
   terceiro estar no ar. Seis pesos, um arquivo cada, font-display:swap
   para o texto aparecer antes da fonte chegar.                       */

@font-face{
  font-family:'General Sans';
  src:url('../fonts/GeneralSans-200.woff2') format('woff2');
  font-weight:200; font-display:swap; font-style:normal;
}
@font-face{
  font-family:'General Sans';
  src:url('../fonts/GeneralSans-300.woff2') format('woff2');
  font-weight:300; font-display:swap; font-style:normal;
}
@font-face{
  font-family:'General Sans';
  src:url('../fonts/GeneralSans-400.woff2') format('woff2');
  font-weight:400; font-display:swap; font-style:normal;
}
@font-face{
  font-family:'General Sans';
  src:url('../fonts/GeneralSans-500.woff2') format('woff2');
  font-weight:500; font-display:swap; font-style:normal;
}
@font-face{
  font-family:'General Sans';
  src:url('../fonts/GeneralSans-600.woff2') format('woff2');
  font-weight:600; font-display:swap; font-style:normal;
}
@font-face{
  font-family:'General Sans';
  src:url('../fonts/GeneralSans-700.woff2') format('woff2');
  font-weight:700; font-display:swap; font-style:normal;
}

/* ---------- 2. TOKENS ------------------------------------ */
:root{
  /* superfície, tema escuro é o padrão */
  --surface:#171717;
  --sd:#0A0A0A;                        /* sombra */
  --sl:#242424;                        /* luz */
  --edge:#6B6B6B;                      /* contorno de controle · 3.5:1 */
  --edge-sub:rgba(255,255,255,.05);    /* divisória, não interativa */

  /* texto */
  --txt:#FFFFFF;
  --body:#9CA3AF;
  --muted:#6B7280;

  /* accent, sobrescrito por [data-frente] */
  --accent:#005357;
  --accent-txt:#5FA8AD;
  --accent-on:#FFFFFF;

  /* frentes, para uso pontual fora do escopo */
  --ia:#7859BE;        --ia-txt:#A78BE0;
  --sistemas:#005357;  --sistemas-txt:#5FA8AD;
  --educacao:#BF7761;  --educacao-txt:#D89A85;
  /* plugins, o azul do brandbook ja passa em texto sobre --surface (7,0:1),
     por isso --plugins-txt repete o valor em vez de clarear como os outros */
  --plugins:#00ACF0;   --plugins-txt:#00ACF0;
  /* cursos: cada um com a cor do site antigo, da paleta da marca. Na
     página do curso ela é o accent; fora dela, só marcador (símbolo,
     faixa do cartão, rótulo, preço, marcador de lista). O -txt é o tom
     que passa em texto sobre a superfície (4,5:1 ou mais nos dois temas).
     O Enscape usava verde e bege no site antigo: o verde é o da Lev
     Layout PRO, então ele fica com o bege. O lilás do Conceito (#887693)
     desce um tom para o texto branco do botão passar (5,7:1) */
  --render:#BF7761;    --render-txt:#D89A85;
  --enscape:#CDA483;   --enscape-txt:#CDA483;
  --archviz:#00365F;   --archviz-txt:#7FA6CC;
  --conceito:#735F80;  --conceito-txt:#A896B3;
  --maislev:#AEC5BB;   --maislev-txt:#AEC5BB;

  /* estados */
  --success:#5BC48A;
  --warning:#F5B53F;
  --danger:#F26D6D;

  /* elevação */
  --elev-sm:5px 5px 10px var(--sd), -5px -5px 10px var(--sl);
  --elev-md:6px 6px 12px var(--sd), -6px -6px 12px var(--sl);
  --elev-lg:10px 10px 20px var(--sd), -10px -10px 20px var(--sl);
  --inset-sm:inset 4px 4px 8px var(--sd), inset -4px -4px 8px var(--sl);
  --inset-lg:inset 8px 8px 16px var(--sd), inset -8px -8px 16px var(--sl);

  /* raio, quatro valores, sem exceção */
  --r-sm:.75rem; --r-md:1.25rem; --r-lg:2rem; --r-xl:3rem;

  /* espaçamento, base 4 */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;
  --s6:1.5rem; --s8:2rem;   --s12:3rem;  --s16:4rem; --s24:6rem;

  /* movimento */
  --t-fast:140ms cubic-bezier(.22,1,.36,1);
  --t-base:180ms ease;

  /* tipografia */
  --font:'General Sans', system-ui, -apple-system, sans-serif;

  /* layout */
  --wrap:1120px;
  --wrap-narrow:760px;
}

/* tema claro */
:root[data-tema="claro"]{
  --surface:#E8E8E8;
  --sd:#C5C5C5;
  --sl:#FFFFFF;
  --edge:#808080;                      /* 3.2:1 */
  --edge-sub:rgba(0,0,0,.07);
  --txt:#141414;
  --body:#4B5563;
  --muted:#7C7C7C;
  --accent-txt:#00474B;
  --ia-txt:#5B3E9B;
  --sistemas-txt:#00474B;
  --educacao-txt:#8F4E3A;
  --plugins-txt:#00658F;
  --render-txt:#8F4E3A;
  --enscape-txt:#7A5A2E;
  --archviz-txt:#00365F;
  --conceito-txt:#65536F;
  --maislev-txt:#46685B;
  --success:#1E7A4C;
  --warning:#8A6100;
  --danger:#C0392B;
}

/* accent por frente, coloque no <body> ou numa <section>:
   <body data-frente="ia">  ·  data-frente="sistemas"  ·  data-frente="educacao" */
[data-frente="ia"]{        --accent:var(--ia);        --accent-txt:var(--ia-txt);        --accent-on:#FFFFFF; }
[data-frente="sistemas"]{  --accent:var(--sistemas);  --accent-txt:var(--sistemas-txt);  --accent-on:#FFFFFF; }
[data-frente="educacao"]{  --accent:var(--educacao);  --accent-txt:var(--educacao-txt);  --accent-on:#141414; }
/* plugins, como a terracota, o azul exige texto #141414 (7,2:1).
   Branco sobre #00ACF0 da 2,6:1 e reprova. */
[data-frente="plugins"]{  --accent:var(--plugins);   --accent-txt:var(--plugins-txt);   --accent-on:#141414; }
/* cursos: a página de cada curso na cor dele (Arthur, 13/10). Archviz
   faz como sistemas: o azul-marinho some no fundo escuro, então o botão
   usa o tom claro com texto escuro e, no tema claro, volta ao marinho */
[data-frente="render"]{   --accent:var(--render);   --accent-txt:var(--render-txt);   --accent-on:#141414; }
[data-frente="enscape"]{  --accent:var(--enscape);  --accent-txt:var(--enscape-txt);  --accent-on:#141414; }
[data-frente="archviz"]{  --accent:var(--archviz);  --accent-txt:var(--archviz-txt);  --accent-on:#FFFFFF;
  --cta:var(--archviz-txt);--cta-on:#0B1A2A}
:root[data-tema="claro"] [data-frente="archviz"]{--cta:var(--archviz);--cta-on:#FFFFFF}
[data-frente="conceito"]{ --accent:var(--conceito); --accent-txt:var(--conceito-txt); --accent-on:#FFFFFF; }
[data-frente="maislev"]{  --accent:var(--maislev);  --accent-txt:var(--maislev-txt);  --accent-on:#141414; }
/* neutro, a marca mãe não tem cor própria. Home e páginas
   institucionais: eyebrow e link em --txt, botão primário invertido */
[data-frente="neutro"]{    --accent:var(--txt);       --accent-txt:var(--txt);           --accent-on:var(--surface); }
/* botão: na frente de sistemas o verde-petróleo escuro some no fundo preto, então
   ele usa o tom claro com texto escuro; no tema claro volta ao escuro com texto branco */
[data-frente="sistemas"]{--cta:var(--sistemas-txt);--cta-on:#0B1213}
:root[data-tema="claro"] [data-frente="sistemas"]{--cta:var(--sistemas);--cta-on:#FFFFFF}

/* ---------- 3. RESET E BASE ------------------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  font-weight:400;
  background:var(--surface);
  color:var(--body);
  -webkit-font-smoothing:antialiased;
  transition:background var(--t-base), color var(--t-base);
}

img,svg,video{display:block;max-width:100%}
a{color:var(--accent-txt);text-decoration:none}
/* Só em quem tem mouse: no toque o :hover gruda depois do clique e o
   link fica sublinhado na volta para a página. */
@media(hover:hover){a:hover{text-decoration:underline}}
button{font-family:inherit}

:focus-visible{outline:2px solid var(--accent-txt);outline-offset:4px}

::selection{background:var(--accent);color:var(--accent-on)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ---------- 4. LAYOUT ------------------------------------ */
.lev-wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s6)}
.lev-wrap--narrow{max-width:var(--wrap-narrow)}

.lev-section{padding-block:var(--s24)}
.lev-section--tight{padding-block:var(--s16)}
/* Faixas: o fundo do bloco vai de ponta a ponta da tela e marca onde ele começa
   e termina. A seção continua com a largura do conteúdo: o fundo sai pelo
   border-image, que pinta além da caixa sem criar rolagem lateral. */
.lev-faixa--funda{border-image:conic-gradient(color-mix(in srgb, var(--sd) 60%, var(--surface)) 0 0) fill 0//0 100vw}
.lev-faixa--cheia{border-image:conic-gradient(var(--accent) 0 0) fill 0//0 100vw;color:var(--accent-on)}
.lev-faixa--cheia > .lev-eyebrow,.lev-faixa--cheia > .lev-h2{color:var(--accent-on)}
.lev-faixa--cheia > .lev-lead,.lev-faixa--cheia > .lev-body,.lev-faixa--cheia > .lev-small{color:color-mix(in srgb, var(--accent-on) 86%, transparent)}
/* No celular o respiro do desktop vira rolagem vazia: as seções encostam
   mais, e o hero sobe para logo abaixo do cabeçalho. */
@media(max-width:720px){
  .lev-section{padding-block:var(--s12)}
  .lev-section--tight{padding-block:var(--s8)}
  main > section:first-child{padding-top:var(--s6)}
}

/* grade responsiva, .lev-grid[data-cols="3"] */
.lev-grid{display:grid;gap:var(--s6)}
.lev-grid[data-cols="2"]{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.lev-grid[data-cols="3"]{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.lev-grid[data-cols="4"]{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.lev-grid[data-cols="5"]{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
/* cinco cartões em três colunas: os dois da última linha esticam até fechar
   a linha, sem buraco (seis trilhas, cada cartão ocupa duas; os dois de
   baixo, três). Abaixo de 721px a grade com .lev-rolo vira fila. */
@media(min-width:721px){
  .lev-grid[data-cols="3"]:has(> :nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}
  .lev-grid[data-cols="3"]:has(> :nth-child(5):last-child) > *{grid-column:span 2}
  .lev-grid[data-cols="3"]:has(> :nth-child(5):last-child) > :nth-child(n+4){grid-column:span 3}
}

/* Duas colunas começam na mesma linha: centralizar a mais curta fazia uma
   começar no meio da outra (Arthur, 13/10). Com imagem ou vídeo de um
   lado, o texto fica no meio da altura dela. Cartões lado a lado esticam
   até a mesma altura. */
.lev-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s12);align-items:start}
.lev-split:not(.lev-split--topo):has(> :is(.lev-media, figure, img, video, .lev-yt, .lev-slider, .lev-ia-orbita),
  > div > :is(.lev-media, figure, .lev-yt):only-child){align-items:center}
/* texto no topo da imagem e acompanhando a rolagem enquanto ela passa:
   para imagem mais alta que a tela (os recortes da Na mídia; o da Casa
   Vogue tem 1.300 px), onde o texto no meio da altura começava longe */
@media(min-width:821px){
  .lev-split--topo > :not(figure){position:sticky;top:var(--s12)}
}
.lev-split > :is(.lev-sunk, .lev-card, .lev-panel, .lev-quote){align-self:stretch}
@media(max-width:820px){.lev-split{grid-template-columns:1fr;gap:var(--s8)}}
/* Galeria só de imagens em pé ou quadradas: no celular, duas por linha.
   Uma por linha fazia a página do curso virar meia dúzia de telas só de foto. */
@media(max-width:560px){
  .lev-grid:has(> .lev-media--retrato, > .lev-media--quadrada):not(:has(> :not(.lev-media))),
  .lev-split:has(> .lev-media--retrato, > .lev-media--quadrada):not(:has(> :not(.lev-media))){
    grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
  .lev-grid:not(:has(> :not(.lev-media))) > .lev-media--retrato,
  .lev-grid:not(:has(> :not(.lev-media))) > .lev-media--quadrada,
  .lev-split:not(:has(> :not(.lev-media))) > .lev-media{border-radius:var(--r-md)}
  /* número ímpar de fotos: a que sobra fica no meio da linha, do mesmo tamanho */
  .lev-grid:has(> .lev-media--retrato, > .lev-media--quadrada):not(:has(> :not(.lev-media))) > :last-child:nth-child(odd){
    grid-column:1/-1;justify-self:center;width:calc(50% - var(--s3)/2)}
}

.lev-stack > * + *{margin-top:var(--s4)}
.lev-cols-2{columns:2;column-gap:var(--s8)}
@media(max-width:720px){.lev-cols-2{columns:1}}
.lev-row{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center}

/* ---------- 5. TIPOGRAFIA -------------------------------- */
.lev-display{
  font-size:clamp(2.4rem,5.5vw,4rem);
  font-weight:700;letter-spacing:-.035em;line-height:1.02;
  color:var(--txt);max-width:18ch;
}
/* Título de seção grande: com ele do tamanho do texto, a página parecia um
   bloco só e ninguém sabia o que estava lendo (Arthur, 09/10). Dentro de
   card e painel ele volta ao tamanho de antes. */
.lev-h2{font-size:clamp(2rem,4.6vw,3.1rem);font-weight:700;letter-spacing:-.035em;line-height:1.08;color:var(--txt)}
.lev-panel .lev-h2,.lev-card .lev-h2{font-size:clamp(1.6rem,3.2vw,2.1rem);letter-spacing:-.025em;line-height:1.15}
.lev-h3{font-size:1.2rem;font-weight:600;letter-spacing:-.01em;color:var(--txt)}
.lev-body{font-size:1rem;max-width:70ch}
.lev-lead{font-size:1.12rem;max-width:56ch;color:color-mix(in srgb, var(--txt) 62%, var(--body))}
/* sem palavra sozinha na última linha, onde o navegador sabe fazer */
.lev-body,.lev-lead{text-wrap:pretty}
.lev-small{font-size:.875rem;color:var(--muted)}

.lev-eyebrow{
  font-size:.78rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;color:var(--accent-txt);
}
/* o rótulo de seção abre com um traço na cor da frente; em card e painel, não */
.lev-eyebrow::before{content:'';display:inline-block;width:28px;height:2px;border-radius:2px;
  background:currentColor;vertical-align:middle;margin:-.2em .7rem 0 0}
.lev-card .lev-eyebrow::before,.lev-panel .lev-eyebrow::before{content:none}
.lev-label{
  font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.15em;color:var(--txt);
}
.lev-num{font-variant-numeric:tabular-nums}

/* preço de oferta, número grande, tabular */
.lev-preco{font-size:clamp(2.4rem,5vw,3.4rem);font-weight:700;letter-spacing:-.03em;
  line-height:1;color:var(--txt);font-variant-numeric:tabular-nums}
.lev-preco small{display:block;font-size:.95rem;font-weight:400;letter-spacing:0;line-height:1.45;
  color:var(--body);margin-top:var(--s2)}
.lev-preco s{font-size:1rem;font-weight:400;color:var(--danger);letter-spacing:0}
/* preço final na cor do produto, a mesma do botão; o valor antigo riscado em vermelho */
.lev-preco{color:var(--accent-txt)}

/* ---------- 6. SUPERFÍCIE E ELEVAÇÃO --------------------- */
.lev-elev-sm{box-shadow:var(--elev-sm)}
.lev-elev-md{box-shadow:var(--elev-md)}
.lev-elev-lg{box-shadow:var(--elev-lg)}
.lev-inset-sm{box-shadow:var(--inset-sm)}
.lev-inset-lg{box-shadow:var(--inset-lg)}

/* painel elevado, máx. 2 ou 3 por dobra */
.lev-panel{
  background:var(--surface);
  border-radius:var(--r-xl);
  box-shadow:var(--elev-lg);
  padding:var(--s12) var(--s8);
}
@media(max-width:640px){.lev-panel{padding:var(--s8) var(--s6);border-radius:var(--r-lg)}}

/* painel afundado, para texto longo e blocos de leitura */
.lev-sunk{
  border-radius:var(--r-lg);
  box-shadow:var(--inset-lg);
  padding:var(--s8);
}
/* Dentro de caixa (painel, cartão afundado, faixa, oferta) e de lista com
   linha de ponta a ponta (itens, passos, dúvidas), o texto vai até o fim:
   a medida de leitura parava a frase no meio, com largura sobrando
   (Arthur, 13/10). Parágrafo solto na página mantém a medida. */
:is(.lev-panel, .lev-sunk, .lev-strip, .lev-oferta, .lev-itens, .lev-passos, .lev-faq) :is(.lev-body, .lev-lead){max-width:none}

/* mídia solta, imagem em superfície afundada com raio grande.
   Sem arquivo, combine com .lev-malha como placeholder.           */
.lev-media{
  border-radius:var(--r-lg);box-shadow:var(--inset-lg);
  aspect-ratio:4/3;overflow:hidden;position:relative;
}
.lev-media--larga{aspect-ratio:16/9}
.lev-media--quadrada{aspect-ratio:1}
.lev-media--folha{aspect-ratio:1122/793}      /* prancha paisagem exportada do LayOut */
.lev-media--retrato{aspect-ratio:4/5}
.lev-media img,.lev-media video{width:100%;height:100%;object-fit:cover}
.lev-media--contida img{object-fit:contain;background:var(--sd)}   /* print com proporção variável */

/* carrossel de imagens, hero da Home. Sem JS fica a primeira imagem.
   As imagens se empilham e trocam por opacidade; os controles só nascem
   com JS (o script marca .is-pronto).                                  */
.lev-slider{display:grid;gap:var(--s4)}
.lev-slider__palco img{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.lev-slider__palco img.is-ativo{opacity:1}
.lev-slider__controles{display:none;align-items:center;justify-content:center;gap:var(--s4)}
.lev-slider.is-pronto .lev-slider__controles{display:flex}
.lev-slider__seta{width:44px;height:44px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface);color:var(--txt);border:1px solid var(--edge);box-shadow:var(--elev-sm);
  transition:box-shadow var(--t-base), transform var(--t-fast)}
.lev-slider__seta:active{transform:translateY(1px);box-shadow:var(--inset-sm)}
.lev-slider__seta svg{width:14px;height:14px}
.lev-slider__pontos{display:flex;gap:var(--s2)}
.lev-slider__ponto{width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.lev-slider__ponto::before{content:'';width:10px;height:10px;border-radius:999px;
  border:1px solid var(--edge);box-shadow:var(--inset-sm)}
.lev-slider__ponto[aria-current="true"]::before{background:var(--txt);box-shadow:none}
@media(prefers-reduced-motion:reduce){.lev-slider__palco img{transition:none}}

/* painel clicável, a porta de produto da Home. Leva contorno
   porque é clicável (WCAG 1.4.11) e afunda no :active.            */
.lev-panel--link{
  display:flex;flex-direction:column;gap:var(--s4);
  border:1px solid var(--edge);cursor:pointer;
  color:inherit;text-decoration:none;
  transition:box-shadow var(--t-base), transform var(--t-fast);
}
.lev-panel--link:hover{text-decoration:none}
.lev-panel--link:active{transform:translateY(1.5px) scale(.995);box-shadow:var(--inset-lg)}
.lev-panel__sym{align-self:flex-start;width:auto;color:var(--accent-txt);margin-bottom:var(--s2)}
/* o paralelogramo é mais baixo que o anel (brandbook 05, equilíbrio): a
   margem completa a altura, para o rótulo ficar na mesma linha nos cartões */
.lev-panel__sym.lev-sym--layout{margin-block:3px calc(var(--s2) + 3px)}
.lev-panel__sym.lev-sym--layout-solo{margin-block:5px calc(var(--s2) + 5px)}
/* o "D" da Lev Design (cartão neutro, como o do teste) e o símbolo de um
   curso também ocupam os 32px do anel do Lev IA */
.lev-panel__sym.lev-sym--design{height:30px;margin-block:1px calc(var(--s2) + 1px)}
.lev-panel__sym.lev-curso__simbolo{height:28px;margin-block:2px calc(var(--s2) + 2px)}
/* os cinco cursos lado a lado (o cartão "Cursos"), cada símbolo na cor
   dele; as alturas compensam a área, como no lockup */
.lev-simbolos{display:flex;align-items:center;gap:.6rem;height:32px}
.lev-simbolos .lev-curso__simbolo{height:24px;width:auto;color:var(--curso-txt)}
.lev-simbolos [data-curso="enscape"] .lev-curso__simbolo{height:13px}
.lev-simbolos [data-curso="maislev"] .lev-curso__simbolo{height:21px}
.lev-simbolos [data-curso="archviz"] .lev-curso__simbolo{height:26px}
.lev-panel__cta{
  margin-top:auto;padding-top:var(--s4);
  font-weight:600;color:var(--accent-txt);
}
.lev-panel--link:hover .lev-panel__cta{text-decoration:underline}
/* porta de produto com botão na cor da frente. No celular o rótulo
   encurta para "Saiba mais", os dois textos vivem no HTML.          */
.lev-panel__btn{margin-top:auto;align-self:flex-start}
.lev-panel__btn-curto{display:none}
@media(max-width:640px){
  .lev-panel__btn{align-self:stretch}
  .lev-panel__btn-longo{display:none}
  .lev-panel__btn-curto{display:inline}
}

/* malha, só dentro de superfície afundada, nunca sobre elevada */
.lev-malha{
  background-image:
    linear-gradient(var(--edge-sub) 1px, transparent 1px),
    linear-gradient(90deg, var(--edge-sub) 1px, transparent 1px);
  background-size:26px 26px;
}

/* ---------- 7. NAVEGAÇÃO --------------------------------- */
.lev-nav{
  display:flex;align-items:center;gap:var(--s6);
  padding-block:var(--s6);flex-wrap:wrap;
  font-size:.9rem;font-weight:500;
}
.lev-nav__brand{margin-right:auto;min-height:44px}
.lev-nav a{color:var(--muted);text-decoration:none;transition:color var(--t-base)}
.lev-nav a:hover{color:var(--txt);text-decoration:none}
.lev-nav a[aria-current="page"]{color:var(--accent-txt);font-weight:600}

.lev-nav__links{display:flex;gap:var(--s6);flex-wrap:wrap;align-items:center}
.lev-nav__acoes{display:flex;gap:var(--s3);align-items:center}

/* menu do celular: um <details>, que abre sem JS. No desktop some e os
   links ficam na linha do cabeçalho. O painel desce por cima da página. */
.lev-nav{position:relative}
.lev-nav__menu{display:none}
.lev-nav__menu > summary{
  list-style:none;cursor:pointer;
  width:44px;height:44px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface);color:var(--txt);
  border:1px solid var(--edge);box-shadow:var(--elev-sm);
  transition:box-shadow var(--t-base), transform var(--t-fast);
}
.lev-nav__menu > summary::-webkit-details-marker{display:none}
.lev-nav__menu > summary:active{transform:translateY(1.5px) scale(.985);box-shadow:var(--inset-sm)}
.lev-nav__menu[open] > summary{box-shadow:var(--inset-sm)}
.lev-nav__menu > summary svg{width:20px;height:20px}
.lev-nav__fechar,
.lev-nav__menu[open] .lev-nav__abrir{display:none}
.lev-nav__menu[open] .lev-nav__fechar{display:block}
.lev-nav__painel{
  position:absolute;left:0;right:0;top:calc(100% - var(--s2));z-index:60;
  background:var(--surface);border:1px solid var(--edge);border-radius:var(--r-lg);
  box-shadow:var(--elev-lg);padding:var(--s2) var(--s6);
}
.lev-nav .lev-nav__painel a{
  display:flex;align-items:center;min-height:52px;
  font-size:1.05rem;font-weight:600;color:var(--txt);
  border-bottom:1px solid var(--edge-sub);
}
.lev-nav__tema{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  min-height:64px;font-size:.9rem;color:var(--muted);
}
@media(max-width:900px){
  .lev-nav{flex-wrap:nowrap;gap:var(--s3);padding-block:var(--s4)}
  .lev-nav__links{display:none}
  .lev-nav__acoes{gap:var(--s2)}
  .lev-nav__acoes > .lev-tema{display:none}
  .lev-nav__menu{display:block}
}

/* alternar tema, botão redondo, 44px de alvo */
.lev-tema{
  width:44px;height:44px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface);color:var(--txt);
  border:1px solid var(--edge);box-shadow:var(--elev-sm);
  transition:box-shadow var(--t-base), transform var(--t-fast);
}
.lev-tema:active{transform:translateY(1.5px) scale(.985);box-shadow:var(--inset-sm)}
.lev-tema svg{width:18px;height:18px}
.lev-tema__claro{display:none}
:root[data-tema="claro"] .lev-tema__claro{display:block}
:root[data-tema="claro"] .lev-tema__escuro{display:none}

/* menu Entrar, dois destinos: Lev IA e área de cursos */
.lev-entrar{position:relative}
.lev-entrar__trigger{
  display:inline-flex;align-items:center;gap:var(--s2);
  min-height:44px;padding:.6rem 1.3rem;border-radius:999px;cursor:pointer;
  background:var(--surface);color:var(--txt);font-weight:600;font-size:.88rem;
  border:1px solid var(--edge);box-shadow:var(--elev-sm);
  transition:box-shadow var(--t-base), transform var(--t-fast);
}
.lev-entrar__trigger:active{transform:translateY(1.5px) scale(.985);box-shadow:var(--inset-sm)}
.lev-entrar__menu{
  position:absolute;right:0;top:calc(100% + var(--s2));min-width:220px;z-index:50;
  background:var(--surface);border-radius:var(--r-md);
  border:1px solid var(--edge);box-shadow:var(--elev-lg);
  padding:var(--s2);display:none;
}
.lev-entrar[data-aberto="true"] .lev-entrar__menu{display:block}
.lev-entrar__menu a{
  display:block;padding:.7rem 1rem;border-radius:var(--r-sm);
  color:var(--body);font-size:.88rem;text-decoration:none;
}
.lev-entrar__menu a:hover{color:var(--txt);box-shadow:var(--inset-sm);text-decoration:none}
.lev-entrar__menu small{display:block;color:var(--muted);font-size:.72rem;margin-top:.1rem}

/* ---------- 8. BOTÕES ------------------------------------ */
.lev-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:.9rem 1.8rem;border-radius:999px;cursor:pointer;
  font-family:inherit;font-size:.94rem;font-weight:600;
  background:var(--cta,var(--accent));color:var(--cta-on,var(--accent-on));
  border:1px solid var(--edge);          /* obrigatório: WCAG 1.4.11 */
  box-shadow:0 12px 30px color-mix(in srgb, var(--cta,var(--accent)) 22%, transparent), var(--elev-md);
  transition:box-shadow var(--t-base), transform var(--t-fast);
  text-decoration:none;
}
.lev-btn:hover{text-decoration:none}
.lev-btn:active{transform:translateY(1.5px) scale(.985);box-shadow:var(--inset-lg)}

.lev-btn--sec{background:var(--surface);color:var(--body)}
.lev-btn--sec:active{color:var(--txt)}
.lev-btn--ghost{background:transparent;box-shadow:none;border-color:transparent;color:var(--accent-txt)}
.lev-btn--ghost:active{transform:none;box-shadow:none}
.lev-btn--lg{padding:1.05rem 2.2rem;font-size:1rem}
.lev-btn--full{width:100%}
/* No celular o botão quebra em no máximo duas linhas centradas, e os
   botões de uma mesma fileira ocupam a largura toda, um embaixo do outro. */
@media(max-width:560px){
  .lev-btn{text-align:center;line-height:1.3}
  .lev-btn--lg{padding:1rem 1.4rem}
  .lev-row > .lev-btn{flex:1 1 100%}
}
.lev-btn[disabled],.lev-btn[aria-disabled="true"]{
  opacity:.45;cursor:not-allowed;box-shadow:var(--inset-sm);
}
.lev-btn[disabled]:active{transform:none}

/* ---------- 9. FORMULÁRIOS ------------------------------- */
.lev-field{
  width:100%;padding:.95rem 1.2rem;border-radius:var(--r-md);
  /* 16px: abaixo disso o iPhone dá zoom na página ao tocar no campo */
  font-family:inherit;font-size:1rem;
  background:var(--surface);color:var(--txt);
  border:1px solid var(--edge);
  box-shadow:var(--inset-sm);
}
.lev-field::placeholder{color:var(--muted)}
.lev-field:focus{outline:2px solid var(--accent-txt);outline-offset:3px}
.lev-field[aria-invalid="true"]{border-color:var(--danger)}

.lev-form-group{display:flex;flex-direction:column;gap:var(--s2)}
.lev-form-group label{font-size:.8rem;font-weight:600;color:var(--txt)}
.lev-form-erro{font-size:.8rem;color:var(--danger);font-weight:500}

/* captura de e-mail, usado em Recursos e no blog */
.lev-optin{display:flex;gap:var(--s3);flex-wrap:wrap}
/* enviado, o formulario fica escondido na pagina: o GTM ainda le o e-mail */
.lev-optin[hidden]{display:none}
.lev-optin .lev-field{flex:1;min-width:220px;width:auto}

/* ---------- 10. CARDS ------------------------------------ */
.lev-card{
  background:var(--surface);
  border-radius:var(--r-md);
  box-shadow:var(--elev-sm);
  padding:var(--s6);
  display:flex;flex-direction:column;
}
.lev-card--link{border:1px solid var(--edge);cursor:pointer;text-decoration:none;color:inherit;
  transition:box-shadow var(--t-base), transform var(--t-fast)}
/* O card inteiro é o link: sem isto o texto todo herdava a cor e o
   sublinhado de link. Quem marca o destino é o kicker e a chamada. */
.lev-card--link:hover{text-decoration:none}
.lev-card--link:active{transform:translateY(1.5px) scale(.995);box-shadow:var(--inset-sm);text-decoration:none}
/* o card de compra e <button> (abre o popup de checkout), nao <a href="#">.
   O navegador daria a ele texto centralizado, fonte menor e largura
   automatica; aqui ele volta a parecer o card-link.                  */
button.lev-card{width:100%;text-align:left;font:inherit;color:inherit}
.lev-card__media{
  height:170px;border-radius:var(--r-sm);box-shadow:var(--inset-sm);
  margin-bottom:var(--s4);overflow:hidden;position:relative;
}
.lev-card__media img{width:100%;height:100%;object-fit:cover}
/* imagem que não pode ser cortada (a barra de um plugin, uma fileira de
   ícones): inteira e centrada no poço, que tem a mesma altura nos cartões
   vizinhos para os títulos começarem na mesma linha */
.lev-card__media--contida{display:flex;align-items:center;justify-content:center;height:120px;padding:var(--s4)}
.lev-card__media--contida img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
@media(max-width:820px){.lev-card__media--contida{height:88px;padding:var(--s3)}}
/* icone de traco no topo do card sem imagem. Herda o accent da pagina. */
.lev-card__icone{width:32px;height:32px;margin-bottom:var(--s4);color:var(--accent-txt);
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lev-card__kicker{font-size:.65rem;text-transform:uppercase;letter-spacing:.16em;
  font-weight:600;color:var(--accent-txt);margin-bottom:var(--s2)}
.lev-card__title{font-size:1.1rem;font-weight:700;color:var(--txt);margin-bottom:var(--s2)}
.lev-card__text{font-size:.95rem;flex:1;margin-bottom:var(--s4)}   /* 15.2px, corpo nunca abaixo de 15px */
.lev-card__meta{font-size:.78rem;color:var(--muted);margin-bottom:var(--s3)}
.lev-card__price{font-size:1.2rem;font-weight:700;color:var(--accent-txt);
  font-variant-numeric:tabular-nums;margin-bottom:var(--s4)}
.lev-card__price span{font-size:.75rem;font-weight:400;color:var(--muted)}
/* pé do cartão-link: o preço e a chamada na mesma linha. A chamada é só
   visual (o cartão inteiro é o link): contorno sem relevo, porque o cartão
   já é elevado. Em cartão de curso ela pega a cor dele (seção dos cursos). */
.lev-card__pe{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s3) var(--s4)}
.lev-card__pe .lev-card__price{margin-bottom:0}
.lev-card__ver{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);flex:none;
  min-height:44px;padding:0 1.15rem;border-radius:999px;border:1px solid var(--edge);
  font-size:.9rem;font-weight:700;color:var(--txt);white-space:nowrap;
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast)}
.lev-card--link:hover .lev-card__ver,.lev-card--link:focus-visible .lev-card__ver{
  background:var(--txt);color:var(--surface);border-color:var(--txt)}
@media(max-width:640px){.lev-card__ver{width:100%}}
/* o texto do cartão agrupado (posts do blog), ocupando a altura que sobra */
.lev-card__corpo{display:flex;flex-direction:column;flex:1}
/* um post só na grade (editoria com um post): o cartão deita, com a imagem
   ao lado do texto, para não virar uma faixa fina na largura toda */
@media(min-width:721px){
  .lev-card--deitado{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8);align-items:center}
  .lev-card--deitado .lev-card__media{height:auto;aspect-ratio:4/3;margin-bottom:0}
}

/* figura com legenda, imagem em superfície afundada */
.lev-figura{margin:0}
.lev-figura figcaption{font-size:.82rem;color:var(--muted);margin-top:var(--s3);line-height:1.6}
.lev-figura figcaption small{display:block;font-size:.76rem}
.lev-figura__rotulo{display:flex;justify-content:space-between;gap:var(--s3);
  font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);margin-bottom:var(--s3)}
.lev-figura__rotulo b{color:var(--txt);font-weight:600}
.lev-figura--depois .lev-figura__rotulo b{color:var(--accent-txt)}

/* clipe com legenda, vídeo curto em loop, mudo, em superfície afundada */
.lev-clipe{margin:0}
.lev-clipe .lev-media{aspect-ratio:1}
/* vídeo vertical (reel 9:16): estreito e centralizado na coluna */
.lev-clipe .lev-media--reel{aspect-ratio:9/16;max-width:320px;margin-inline:auto}
.lev-clipe figcaption{font-size:.82rem;font-weight:600;color:var(--txt);margin-top:var(--s3)}
.lev-clipe figcaption small{display:block;font-weight:400;color:var(--muted);margin-top:.1rem}

/* passos numerados, método em etapas, texto na base */
.lev-passos{list-style:none;counter-reset:passo;border-top:1px solid var(--edge-sub)}
.lev-passos > li{counter-increment:passo;position:relative;padding:var(--s6) 0 var(--s6) 3.5rem;
  border-bottom:1px solid var(--edge-sub)}
.lev-passos > li::before{content:counter(passo,decimal-leading-zero);position:absolute;left:0;top:var(--s6);
  font-size:.8rem;font-weight:600;letter-spacing:.08em;color:var(--accent-txt);
  font-variant-numeric:tabular-nums}
.lev-passos h3{margin-bottom:var(--s2)}

/* item de entrega com preço à direita */
.lev-itens{border-top:1px solid var(--edge-sub)}
.lev-item{display:grid;gap:var(--s2) var(--s8);padding:var(--s6) 0;border-bottom:1px solid var(--edge-sub)}
@media(min-width:720px){.lev-item{grid-template-columns:1fr 140px;align-items:start}
  .lev-item__preco{text-align:right}}
.lev-item__preco{font-size:.9rem;font-weight:600;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* conta aberta, composição de valor, em superfície afundada */
.lev-conta{border-radius:var(--r-lg);box-shadow:var(--inset-lg);padding:var(--s6) var(--s8)}
.lev-conta__linha{display:flex;justify-content:space-between;gap:var(--s6);
  padding:var(--s3) 0;border-bottom:1px solid var(--edge-sub);font-size:.95rem}
.lev-conta__linha span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--txt)}
.lev-conta__total{display:flex;justify-content:space-between;gap:var(--s6);
  padding:var(--s4) 0 0;font-size:.8rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted)}
.lev-conta__total s{font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:560px){
  .lev-conta{padding:var(--s4)}
  .lev-conta__linha,.lev-conta__total{gap:var(--s3)}
}

/* selo de garantia, círculo plano, sem relevo */
.lev-selo{display:grid;gap:var(--s6);align-items:center}
@media(min-width:720px){.lev-selo{grid-template-columns:150px 1fr;gap:var(--s8)}}
.lev-selo__marca{width:150px;aspect-ratio:1;border-radius:999px;border:1px solid var(--edge);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  color:var(--txt)}
.lev-selo__marca b{font-size:2.6rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.lev-selo__marca span{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--muted);margin-top:var(--s1)}

/* perguntas, details nativo, sem JS */
.lev-faq{border-top:1px solid var(--edge-sub)}
.lev-faq details{border-bottom:1px solid var(--edge-sub)}
.lev-faq summary{cursor:pointer;list-style:none;position:relative;
  padding:var(--s4) var(--s12) var(--s4) 0;min-height:44px;
  font-weight:600;color:var(--txt);font-size:1.02rem}
.lev-faq summary::-webkit-details-marker{display:none}
.lev-faq summary::after{content:'+';position:absolute;right:var(--s2);top:var(--s4);
  font-weight:400;font-size:1.3rem;line-height:1.2;color:var(--accent-txt)}
.lev-faq details[open] summary::after{content:'−'}
.lev-faq summary:hover{color:var(--accent-txt)}
.lev-faq__resposta{padding:0 var(--s12) var(--s6) 0}
.lev-faq__resposta p + p{margin-top:var(--s3)}

/* barra fixa de compra, só no celular, um elemento elevado */
.lev-barra{position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--edge);box-shadow:var(--elev-lg)}
.lev-barra__preco{font-weight:700;color:var(--txt);font-variant-numeric:tabular-nums;line-height:1.2}
.lev-barra__preco small{display:block;font-size:.72rem;font-weight:400;color:var(--muted)}
.lev-barra .lev-btn{padding:.75rem 1.3rem;font-size:.88rem;white-space:nowrap}
@media(min-width:900px){.lev-barra{display:none}}
body.has-barra{padding-bottom:88px}
@media(min-width:900px){body.has-barra{padding-bottom:0}}

/* faixa de destaque, inset, para pausar a rolagem */
.lev-strip{
  border-radius:var(--r-lg);box-shadow:var(--inset-lg);
  padding:var(--s8);display:flex;gap:var(--s8);
  align-items:center;justify-content:space-between;flex-wrap:wrap;
}

/* imprensa, nomes em texto, ou logos. Os arquivos de logo são pretos
   com transparência: no tema escuro (padrão) eles invertem para branco. */
.lev-imprensa{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);
  list-style:none;font-size:.78rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
}
.lev-imprensa svg{height:22px;width:auto}
.lev-imprensa--logos{align-items:center;gap:var(--s4) var(--s8)}
.lev-imprensa--logos a{display:inline-flex;align-items:center;min-height:48px;border-radius:var(--r-sm)}
.lev-imprensa--logos img{height:48px;width:auto;opacity:.72;filter:invert(1);transition:opacity var(--t-base)}
.lev-imprensa--logos a:hover img,.lev-imprensa--logos a:focus-visible img{opacity:1}
:root[data-tema="claro"] .lev-imprensa--logos img{filter:none}
/* no celular os logos viram uma grade de duas colunas, sem linha torta */
@media(max-width:640px){
  .lev-imprensa--logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s6)}
  .lev-imprensa--logos img{height:40px;max-width:100%;object-fit:contain;object-position:left center}
}

/* recorte de imprensa, página Na mídia */
.lev-recorte{margin:0}
.lev-recorte .lev-media{aspect-ratio:auto}
.lev-recorte .lev-media img{height:auto}
.lev-recorte__logo{height:48px;width:auto;filter:invert(1)}
:root[data-tema="claro"] .lev-recorte__logo{filter:none}

/* estatística */
.lev-stat__n{font-size:2rem;font-weight:700;color:var(--txt);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.lev-stat__l{font-size:.76rem;color:var(--muted);margin-top:var(--s1)}

/* depoimento, usar .is-placeholder até a Carol entregar os reais */
.lev-quote{
  border-radius:var(--r-md);box-shadow:var(--inset-sm);padding:var(--s6);
}
.lev-quote__text{font-size:.95rem;color:var(--txt);margin-bottom:var(--s4)}
.lev-quote__autor{font-size:.82rem;color:var(--muted)}
.lev-quote.is-placeholder{opacity:.55;border:1px dashed var(--edge)}
.lev-quote.is-placeholder::before{
  content:'PLACEHOLDER';display:block;font-size:.6rem;letter-spacing:.2em;
  color:var(--warning);font-weight:700;margin-bottom:var(--s2);
}

/* ---------- 11. MARCA ------------------------------------ */
.lev-lockup{display:inline-flex;align-items:center;gap:1rem}
.lev-lockup svg{flex:none;color:var(--txt)}
/* lockup de produto: o símbolo na cor da frente (brandbook 05); só a marca
   mãe, no cabeçalho e no rodapé, fica na cor do texto */
.lev-lockup.lev-accent-txt svg{color:var(--accent-txt)}
.lev-lockup__txt{line-height:1}
.lev-lockup__lev{display:block;font-size:.72rem;font-weight:400;letter-spacing:.3em;color:var(--txt)}
.lev-lockup__nome{display:block;font-size:1.1rem;font-weight:700;letter-spacing:.03em;
  color:var(--txt);line-height:1.2;margin-top:.28rem}

/* alturas do símbolo, ver brandbook seção 05 */
.lev-sym--design{height:38px}
.lev-sym--ia{height:32px}
.lev-sym--layout{height:26px}
.lev-sym--flow{height:36px}
.lev-sym--design-solo{height:54px}
.lev-sym--ia-solo{height:50px}
.lev-sym--layout-solo{height:40px}
.lev-sym--flow-solo{height:56px}

/* ---------- 12. ESTADOS ---------------------------------- */
.lev-estado{display:inline-flex;align-items:center;gap:var(--s2);
  font-size:.85rem;font-weight:600}
.lev-estado::before{content:'';width:8px;height:8px;border-radius:99px;background:currentColor;flex:none}
.lev-estado--ok{color:var(--success)}
.lev-estado--alerta{color:var(--warning)}
.lev-estado--erro{color:var(--danger)}

.lev-skeleton{
  border-radius:var(--r-sm);box-shadow:var(--inset-sm);
  background:var(--surface);min-height:1rem;
  animation:lev-pulse 1.6s ease-in-out infinite;
}
@keyframes lev-pulse{0%,100%{opacity:.55}50%{opacity:.9}}

.lev-vazio{
  border-radius:var(--r-lg);box-shadow:var(--inset-lg);
  padding:var(--s16) var(--s8);text-align:center;
}

/* ---------- 13. UTILITÁRIOS ------------------------------ */
.lev-center{text-align:center}
/* hero centralizado: título, texto, vídeo e botão numa coluna só.
   O lead e o vídeo têm largura máxima, então precisam de margem
   automática; a linha do botão é flex e centraliza pelo eixo. */
.lev-hero-centro{text-align:center;padding-top:var(--s8)}
.lev-hero-centro .lev-display,.lev-hero-centro .lev-lead{margin-inline:auto}
.lev-hero-centro .lev-row{justify-content:center}
/* a dobra é título + vídeo + botão: o título encolhe e o vídeo se ajusta
   à altura da janela, para os três caberem sem rolar */
.lev-hero-centro .lev-display{font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.08;max-width:34ch}
.lev-hero-centro .lev-clipe{max-width:clamp(300px,calc((100vh - 400px) * 1.7778),960px);margin-inline:auto}

/* bloco de texto centralizado: o que tem largura máxima ganha margem automática */
.lev-centro{text-align:center;margin-inline:auto}
.lev-centro .lev-lead,.lev-centro .lev-body{margin-inline:auto}
/* a lista marcada centraliza como bloco, mas os itens seguem alinhados à
   esquerda: marcador longe do texto não se lê */
.lev-centro .lev-lista--marcada{display:inline-block;text-align:left}
/* o que é tabela, passo a passo ou acordeão não centraliza */
.lev-centro .lev-passos,.lev-centro .lev-faq,.lev-centro .lev-item,.lev-centro .lev-selo{text-align:left}
.lev-media--estreita{max-width:520px;margin-inline:auto}

/* gráfico de traço de um passo (LLP v4). O accent marca o que muda. */
.lev-passo-grafico{display:block;width:100%;max-width:240px;height:auto;margin-bottom:var(--s6);
  fill:none;stroke:var(--body);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lev-passo-grafico .is-accent{stroke:var(--accent-txt);stroke-width:2}
.lev-passo-grafico .is-cheio{fill:var(--accent-txt);stroke:none}
.lev-passo-grafico .is-tracejado{stroke-dasharray:3 4;opacity:.55}

/* núcleo do sistema (LLP v4): o fluxo se divide nos dois botões e se junta
   de novo antes do painel */
.lev-nucleo{max-width:760px;margin-inline:auto}
.lev-nucleo > .lev-abas__painel{width:min(var(--wrap) - 2 * var(--s6),100vw - 2 * var(--s6));
  margin-inline:calc((100% - min(var(--wrap) - 2 * var(--s6),100vw - 2 * var(--s6))) / 2);text-align:left}
.lev-nucleo__ramo{display:block;width:100%;height:auto;fill:none;stroke:var(--accent-txt);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lev-nucleo .lev-nucleo__botoes{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-block:var(--s2)}
.lev-nucleo .lev-nucleo__botoes .lev-aba{justify-content:center;text-align:center}
.lev-nucleo__encontro{position:relative}
.lev-nucleo__dica{position:absolute;top:var(--s2);left:27%;right:27%;font-size:.9rem;line-height:1.35;
  color:var(--body);text-align:center}
.lev-nucleo__junta{width:fit-content;margin:var(--s2) auto 0;padding:.6rem 1.3rem;border-radius:999px;
  border:1px solid var(--accent-txt);color:var(--txt);font-size:.95rem;text-align:center}
.lev-nucleo__junta b{color:var(--accent-txt);font-weight:600}
@media(max-width:640px){
  .lev-nucleo__ramo{display:none}
  .lev-nucleo .lev-nucleo__botoes{grid-template-columns:1fr;margin-top:var(--s8)}
  .lev-nucleo__junta{margin-top:var(--s6)}
  .lev-nucleo__dica{position:static;margin-top:var(--s4)}
}
.lev-center .lev-body,.lev-center .lev-lead,.lev-center .lev-display{margin-inline:auto}
.lev-mt-2{margin-top:var(--s2)}  .lev-mt-4{margin-top:var(--s4)}
.lev-mt-6{margin-top:var(--s6)}  .lev-mt-8{margin-top:var(--s8)}
.lev-mt-12{margin-top:var(--s12)}  .lev-mt-16{margin-top:var(--s16)}
.lev-mb-4{margin-top:0;margin-bottom:var(--s4)}
.lev-mb-8{margin-bottom:var(--s8)}
.lev-hide{display:none}
.lev-accent-txt{color:var(--accent-txt)}
.lev-lista{list-style:none}
.lev-lista > li + li{margin-top:var(--s3)}
.lev-lista--marcada > li{padding-left:var(--s6);position:relative}
.lev-lista--marcada > li::before{
  content:'';position:absolute;left:0;top:.7em;width:12px;height:1px;
  background:var(--accent-txt);
}
.lev-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* rodapé: a marca com uma frase, quatro grupos de links com o título
   forte (cor do texto) e o link legível (cor do corpo), e a linha da
   empresa embaixo. Fundo um tom abaixo da página, para fechar o site. */
.lev-footer{
  margin-top:var(--s16);padding-block:var(--s16) var(--s8);font-size:.95rem;
  border-top:1px solid var(--edge-sub);
  background:color-mix(in srgb, var(--sd) 80%, var(--surface));
}
.lev-footer__grade{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:var(--s12) var(--s8)}
.lev-footer__logo{color:var(--txt);text-decoration:none}
.lev-footer__logo .lev-sym--design{height:44px}
.lev-footer__frase{margin-top:var(--s4);max-width:28ch;color:var(--body);line-height:1.6}
.lev-footer__titulo{margin-bottom:var(--s4);font-size:.74rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt)}
.lev-footer a:not(.lev-footer__logo){display:flex;align-items:center;gap:var(--s2);width:fit-content;
  padding-block:.3rem;color:var(--body);text-decoration:none;transition:color var(--t-base)}
@media(hover:hover){.lev-footer a:not(.lev-footer__logo):hover{color:var(--txt);text-decoration:underline;text-underline-offset:3px}}
.lev-footer a svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.lev-footer a svg .lev-footer__ponto{fill:currentColor;stroke:none}
.lev-footer__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2) var(--s8);
  margin-top:var(--s12);padding-top:var(--s6);border-top:1px solid var(--edge-sub);
  font-size:.84rem;line-height:1.7;color:var(--body)}
@media(max-width:900px){
  .lev-footer__grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s8) var(--s6)}
  .lev-footer__marca{grid-column:1/-1}
}
/* no celular: link com altura de dedo */
@media(max-width:720px){
  .lev-footer{margin-top:var(--s8);padding-block:var(--s12) var(--s8)}
  .lev-footer a:not(.lev-footer__logo){padding-block:.55rem}
  .lev-footer__legal{margin-top:var(--s8)}
}

/* ---------- 15. EMERGIR ---------------------------------- */
/* A única animação do site, conforme o brandbook: o elemento não
   cresce nem aparece do nada, ele SOBE da superfície ao entrar na
   tela.

   A UNIDADE É A <section>. Cada seção dentro do <main> emerge
   inteira, uma vez. Não é preciso marcar nada no HTML: a regra vale
   sozinha em qualquer página, o que garante o mesmo comportamento no
   site todo sem depender de alguém lembrar de anotar elemento por
   elemento.

   Como o estado inicial vem do CSS e não do JS, não existe piscada:
   a seção já nasce recolhida no parse, em vez de aparecer e sumir
   quando o script roda.

   SEM JS NADA É ESCONDIDO. Um script inline no <head> marca
   <html data-motion="js">. Se ele não rodar, o atributo não existe,
   nenhuma regra abaixo casa, e a página fica no estado final, no
   lugar e elevada. É o que o brandbook exige.                        */

[data-motion="js"] main > section{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .65s ease, transform .65s cubic-bezier(.22,1,.36,1);
}
[data-motion="js"] main > section.is-emergido{
  opacity:1;
  transform:none;
}

/* A primeira seção nunca se esconde: ela já está na tela quando a
   página abre, e recolher o hero seria animar o que o leitor veio ver. */
[data-motion="js"] main > section:first-of-type{
  opacity:1;
  transform:none;
}

/* Opt-in para granularidade fina, quando a seção inteira for grande
   demais para emergir de uma vez só. Vale dentro de qualquer seção e
   substitui o comportamento padrão dela.                              */
[data-motion="js"] main > section:has([data-emergir]){
  opacity:1;
  transform:none;
}
[data-motion="js"] [data-emergir]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .65s ease, transform .65s cubic-bezier(.22,1,.36,1), box-shadow .65s ease;
}
/* parte de afundado até a elevação própria do componente. Só em quem
   já tem box-shadow de relevo, as duas sombras têm o mesmo número de
   camadas e interpolam sem salto, que é literalmente emergir.         */
[data-motion="js"] [data-emergir="relevo"]{ box-shadow:var(--inset-sm); }
[data-motion="js"] [data-emergir].is-emergido{ opacity:1; transform:none; }
[data-motion="js"] [data-emergir="relevo"].is-emergido{ box-shadow:revert; }

/* escalonamento por posição na fileira, sem style inline */
[data-motion="js"] [data-emergir][data-atraso="1"]{transition-delay:.08s}
[data-motion="js"] [data-emergir][data-atraso="2"]{transition-delay:.16s}
[data-motion="js"] [data-emergir][data-atraso="3"]{transition-delay:.24s}

@media(prefers-reduced-motion:reduce){
  [data-motion="js"] main > section,
  [data-motion="js"] [data-emergir]{opacity:1;transform:none;transition:none}
  [data-motion="js"] [data-emergir="relevo"]{box-shadow:revert}
}

/* ---------- 14. EXPERIÊNCIA ----------------------------- */
/* Componentes que encenam o produto em vez de descrevê-lo.
   Todos funcionam em superfície afundada; o único relevo é o
   puxador ou o botão que dispara a cena.                       */

/* comparador, arraste para ver o modelo virar prancha */
.lev-compara{position:relative;--pos:50%;user-select:none;-webkit-user-select:none}
.lev-compara__camada{position:absolute;inset:0}
.lev-compara__camada img{width:100%;height:100%;object-fit:cover;display:block}
.lev-compara__camada--depois{clip-path:inset(0 0 0 var(--pos))}
.lev-compara__linha{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;
  background:var(--accent-txt);transform:translateX(-1px);pointer-events:none}
.lev-compara__puxador{position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:999px;pointer-events:none;
  display:flex;align-items:center;justify-content:center;color:var(--txt);
  background:var(--surface);border:1px solid var(--edge);box-shadow:var(--elev-md)}
.lev-compara__puxador svg{width:18px;height:18px}
.lev-compara__faixa{position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.lev-compara:focus-within .lev-compara__puxador{outline:2px solid var(--accent-txt);outline-offset:4px}
.lev-compara__rotulo{position:absolute;top:var(--s3);padding:.35rem .75rem;border-radius:999px;
  font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  background:var(--surface);color:var(--txt);border:1px solid var(--edge-sub);pointer-events:none}
.lev-compara__rotulo--antes{left:var(--s3)}
.lev-compara__rotulo--depois{right:var(--s3);color:var(--accent-txt)}
.lev-compara__dica{position:absolute;bottom:var(--s3);left:50%;transform:translateX(-50%);
  padding:.4rem .9rem;border-radius:999px;white-space:nowrap;pointer-events:none;
  font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  background:var(--surface);color:var(--txt);border:1px solid var(--edge-sub);
  transition:opacity var(--t-base)}
.lev-compara.is-tocado .lev-compara__dica{opacity:0}

/* trilha, etapas em linha: MODELO · INFORMAÇÃO · DOCUMENTAÇÃO · ENTREGA */
.lev-trilha{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);
  list-style:none;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--txt)}
.lev-trilha li+li::before{content:'';display:inline-block;width:28px;height:1px;
  background:var(--accent-txt);margin-right:var(--s4);vertical-align:middle}
/* no celular a trilha não cabe numa linha: vira coluna, com o traço em pé */
@media(max-width:560px){
  .lev-trilha{flex-direction:column;align-items:flex-start;gap:var(--s2)}
  .lev-trilha li+li::before{display:block;width:1px;height:14px;margin:0 0 var(--s2) .35rem}
}

/* palco, narrativa por rolagem: texto à esquerda, cena fixa à direita */
.lev-palco{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s12);align-items:start}
.lev-palco__cena{position:sticky;top:var(--s8)}
.lev-palco__quadros{position:relative}
.lev-palco__quadro{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
.lev-palco__quadro:first-child{position:relative}
.lev-palco__quadro.is-ativo{opacity:1}
.lev-palco__quadro img{width:100%;height:100%;object-fit:cover;display:block}
.lev-palco__legenda{margin-top:var(--s3);font-size:.78rem;color:var(--muted);min-height:1.4em}
.lev-palco__passo{min-height:60vh;display:flex;flex-direction:column;justify-content:center;
  opacity:.35;transition:opacity .4s ease}
.lev-palco__passo.is-ativo{opacity:1}
.lev-palco__passo:last-child{min-height:40vh}
.lev-palco__n{font-size:.8rem;font-weight:600;letter-spacing:.12em;color:var(--accent-txt);
  font-variant-numeric:tabular-nums}
@media(max-width:820px){
  .lev-palco{grid-template-columns:1fr;gap:var(--s6)}
  .lev-palco__cena{top:var(--s4)}
  .lev-palco__passo{min-height:0;padding-block:var(--s6);opacity:1}
}

/* abas, simulador de produto. Radio + label; o JS só troca o painel. */
.lev-abas__lista{display:flex;flex-wrap:wrap;gap:var(--s3)}
.lev-aba{display:inline-flex;align-items:center;gap:.3em;min-height:44px;padding:.55rem 1.1rem;border-radius:999px;
  cursor:pointer;font-size:.85rem;font-weight:600;color:var(--body);
  background:var(--surface);border:1px solid var(--edge);box-shadow:var(--elev-sm);
  transition:box-shadow var(--t-base),color var(--t-base),transform var(--t-fast)}
.lev-aba:hover{color:var(--txt)}
input:checked + .lev-aba,
.lev-aba[aria-selected="true"]{box-shadow:var(--inset-sm);color:var(--accent-txt)}
input:focus-visible + .lev-aba{outline:2px solid var(--accent-txt);outline-offset:4px}
.lev-aba--grande{font-size:1rem;padding:.8rem 1.6rem}
.lev-aba__nota{color:var(--accent-txt)}
.lev-aba__nota::before{content:'· '}
/* no celular as abas de escolha (mensal ou anual, um plugin ou outro)
   ficam lado a lado, meio a meio, com o texto centrado */
@media(max-width:560px){
  .lev-abas__lista[role="tablist"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
  .lev-abas__lista[role="tablist"] .lev-aba{justify-content:center;flex-direction:column;
    text-align:center;line-height:1.25;padding:.65rem .75rem;font-size:.88rem}
  .lev-aba__nota{font-size:.74rem}
  .lev-aba__nota::before{content:none}
}
.lev-abas__painel[hidden]{display:none}
.lev-abas__painel{margin-top:var(--s6)}

/* fluxo, "altere a porta em 15 cm": duas colunas, mesma planta, dois destinos.
   A porta só anda na coluna Lev, e o deslocamento vem daqui, por coluna, não
   de style inline. Assim o desenho tradicional NUNCA se atualiza, que é a
   tese da cena. Na coluna tradicional o que aparece é o fantasma: a porta
   onde o modelo a colocou, que a planta órfã não recebeu.
   Na marcação, .porta agrupa o vão (um rect que tapa a parede) e a folha;
   .fantasma é a folha tracejada na posição nova; .cota é o texto.          */
.lev-fluxo{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8)}
@media(max-width:720px){.lev-fluxo{grid-template-columns:1fr}}
.lev-fluxo__col{border-radius:var(--r-lg);box-shadow:var(--inset-lg);padding:var(--s6)}
.lev-fluxo__planta{display:block;width:100%;height:auto;color:var(--txt)}
.lev-fluxo__planta .porta{transition:transform .8s cubic-bezier(.22,1,.36,1)}
.lev-fluxo__planta .porta rect{fill:var(--surface);stroke:none}
.lev-fluxo__col--lev .lev-fluxo__planta .porta{--porta-dx:28px}
.is-alterado .lev-fluxo__planta .porta{transform:translateX(var(--porta-dx,0))}
.lev-fluxo__planta .fantasma{opacity:0;stroke:var(--danger);transition:opacity .4s ease .8s}
.is-alterado .lev-fluxo__col--tradicional .fantasma{opacity:1}
.lev-fluxo__planta .cota{opacity:0;transition:opacity .3s ease .9s;font-size:13px;font-weight:600;fill:var(--accent-txt)}
.lev-fluxo__col--tradicional .lev-fluxo__planta .cota{fill:var(--danger)}
.lev-fluxo__col--lev .lev-fluxo__planta .cota{fill:var(--success)}
.is-alterado .lev-fluxo__planta .cota{opacity:1}
.lev-fluxo__lista{list-style:none;margin-top:var(--s6);border-top:1px solid var(--edge-sub)}
.lev-fluxo__lista li{display:flex;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) 0;border-bottom:1px solid var(--edge-sub);font-size:.9rem;color:var(--body)}
.lev-fluxo__lista li span:last-child{font-size:.72rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap;color:var(--muted);transition:color .3s ease}
.lev-fluxo__lista li span:last-child::before{content:attr(data-antes)}
.is-alterado .lev-fluxo__lista li span:last-child::before{content:attr(data-depois)}
/* o modelo mudou nos dois fluxos: a primeira linha é verde dos dois lados */
.is-alterado .lev-fluxo__lista li:first-child span:last-child{color:var(--success);transition-delay:.6s}
/* tradicional: cada desenho acende em vermelho, um de cada vez, escalonado por posição */
.is-alterado .lev-fluxo__col--tradicional li span:last-child{color:var(--danger)}
.is-alterado .lev-fluxo__col--tradicional li:nth-child(2) span:last-child{transition-delay:1s}
.is-alterado .lev-fluxo__col--tradicional li:nth-child(3) span:last-child{transition-delay:1.35s}
.is-alterado .lev-fluxo__col--tradicional li:nth-child(4) span:last-child{transition-delay:1.7s}
.is-alterado .lev-fluxo__col--tradicional li:nth-child(5) span:last-child{transition-delay:2.05s}
.is-alterado .lev-fluxo__col--tradicional li:nth-child(6) span:last-child{transition-delay:2.4s}
/* Lev: tudo muda junto, em verde */
.is-alterado .lev-fluxo__col--lev li span:last-child{color:var(--success);transition-delay:.9s}
.lev-fluxo__saldo{margin-top:var(--s4);font-size:1.1rem;font-weight:700;color:var(--txt);min-height:1.5em;
  opacity:0;transition:opacity .4s ease}
.is-alterado .lev-fluxo__saldo{opacity:1;transition-delay:2.8s}
.lev-fluxo__col--lev .lev-fluxo__saldo{color:var(--success)}
.lev-fluxo__col--tradicional .lev-fluxo__saldo{color:var(--danger)}

@media(prefers-reduced-motion:reduce){
  .lev-palco__quadro,.lev-palco__passo,.lev-fluxo__planta .porta,.lev-fluxo__planta .fantasma,.lev-fluxo__planta .cota,.lev-fluxo__lista li span:last-child,.lev-fluxo__saldo{transition:none}
}

/* ---------- 16. PROSA E BLOG ----------------------------- */
/* Texto corrido de post, gerado por blog/blog.py a partir de Markdown.
   Coluna de leitura em .lev-wrap--narrow; a hierarquia vem das tags.  */
.lev-prosa{font-size:1.06rem;line-height:1.7}
.lev-prosa > * + *{margin-top:var(--s4)}
.lev-prosa h2{font-size:clamp(1.35rem,2.6vw,1.7rem);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--txt);margin-top:var(--s12)}
.lev-prosa h3{font-size:1.15rem;font-weight:600;color:var(--txt);margin-top:var(--s8)}
.lev-prosa p{max-width:70ch}
.lev-prosa ul,.lev-prosa ol{padding-left:1.4rem;max-width:70ch}
.lev-prosa li + li{margin-top:var(--s2)}
.lev-prosa li::marker{color:var(--accent-txt);font-weight:600}
.lev-prosa b{color:var(--txt);font-weight:600}
.lev-prosa a{text-decoration:underline;text-underline-offset:.15em}
.lev-prosa blockquote{border-left:2px solid var(--accent-txt);padding-left:var(--s6);color:var(--txt);font-size:1.15rem;max-width:60ch}
.lev-prosa figure{margin:var(--s8) 0}
.lev-prosa figure img{width:100%;height:auto;border-radius:var(--r-lg);box-shadow:var(--inset-lg)}
.lev-prosa figcaption{font-size:.82rem;color:var(--muted);margin-top:var(--s3);line-height:1.6}
.lev-prosa code{font-family:ui-monospace,Consolas,monospace;font-size:.88em;padding:.1em .45em;border-radius:.4rem;box-shadow:var(--inset-sm);color:var(--txt)}
.lev-prosa hr{border:0;border-top:1px solid var(--edge-sub);margin:var(--s12) 0}

/* fachada de vídeo do YouTube, promovida das páginas de curso, onde
   estava repetida. O iframe só nasce no clique (ver script das páginas). */
.lev-yt{position:relative;display:block;width:100%;padding:0;border:1px solid var(--edge);cursor:pointer;
  border-radius:var(--r-lg);box-shadow:var(--inset-lg);overflow:hidden;
  aspect-ratio:16/9;background:var(--sd);color:var(--txt)}
.lev-yt img{width:100%;height:100%;object-fit:cover;display:block}
.lev-yt__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--edge);box-shadow:var(--elev-md);
  transition:transform var(--t-fast)}
.lev-yt:hover .lev-yt__play{transform:translate(-50%,-50%) scale(1.06)}
.lev-yt:focus-visible{outline:2px solid var(--accent-txt);outline-offset:4px}
.lev-yt__play svg{width:22px;height:22px;margin-left:3px;fill:currentColor}
.lev-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lev-clipe .lev-yt{aspect-ratio:16/9}
.lev-clipe .lev-yt.lev-yt--quadrado{aspect-ratio:1;cursor:auto}   /* vídeo quadrado já embutido (Panda) */
/* aula trancada (Lev Express): a capa escurecida com um cadeado no lugar do
   play; o clique abre o cadastro num popup, que libera as aulas */
.lev-yt--trancado img{filter:grayscale(.35) brightness(.7)}
.lev-yt__cadeado{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--edge);box-shadow:var(--elev-md)}
.lev-yt__cadeado svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* mural de prints (depoimentos): colunas, cada print na sua altura */
.lev-mural{columns:3 280px;column-gap:var(--s6)}
.lev-mural img{display:block;width:100%;height:auto;margin-bottom:var(--s6);break-inside:avoid;
  border-radius:var(--r-sm);border:1px solid var(--edge-sub)}

/* logo de terceiro desenhado para fundo claro: ganha uma plaquinha
   clara para não sumir no tema escuro */
.lev-chip-img{display:inline-block;width:auto;max-width:min(260px,100%);height:auto;
  padding:var(--s3) var(--s4);border-radius:var(--r-sm);background:#fff}

/* autor do post */
.lev-autor{display:flex;gap:var(--s4);align-items:center}
.lev-autor__foto{width:56px;height:56px;border-radius:999px;box-shadow:var(--inset-sm);overflow:hidden;flex:none}
.lev-autor__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.lev-autor b{display:block;color:var(--txt);font-weight:600}
.lev-autor span{display:block;font-size:.85rem;color:var(--muted)}

/* editorias do índice: as abas como links, a atual afundada */
a.lev-aba{text-decoration:none}
.lev-aba[aria-current="page"]{box-shadow:var(--inset-sm);color:var(--accent-txt)}

@media(prefers-reduced-motion:reduce){.lev-yt:hover .lev-yt__play{transform:translate(-50%,-50%)}}

/* ---------- 17. QUIZ ------------------------------------- */
/* "Descobrir meu caminho". Mora em comecar.html e abre como diálogo na
   Home. As opções são radios nativos com label em cartão: teclado e leitor
   de tela funcionam sem nada extra. */
.lev-quiz{max-width:680px;margin-inline:auto}
.lev-quiz__progresso{display:flex;align-items:center;gap:var(--s4);
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--body)}
.lev-quiz__barra{flex:1;height:6px;border-radius:999px;box-shadow:var(--inset-sm);overflow:hidden}
.lev-quiz__barra span{display:block;height:100%;width:var(--progresso,0%);
  background:var(--accent-txt);border-radius:inherit;transition:width var(--t-base)}
/* sem margin-top no reset: era ele que anulava o lev-mt-8 entre a barra e a pergunta */
.lev-quiz fieldset{border:0;padding:0;margin-inline:0;margin-bottom:0;min-width:0}
.lev-quiz legend{padding:0;width:100%}
.lev-quiz__progresso + fieldset{margin-top:var(--s8)}
.lev-quiz__opcao b{font-weight:600;color:var(--txt)}
.lev-quiz__apoio{margin-top:var(--s3)}
.lev-quiz__opcoes{display:grid;gap:var(--s3);margin-top:var(--s8)}
.lev-quiz__opcao{display:flex;align-items:flex-start;gap:var(--s4);
  padding:var(--s4) var(--s6);border-radius:var(--r-md);cursor:pointer;
  background:var(--surface);border:1px solid var(--edge);box-shadow:var(--elev-sm);
  color:var(--txt);font-size:1rem;line-height:1.5;
  transition:box-shadow var(--t-base),border-color var(--t-base)}
.lev-quiz__opcao::before{content:"";flex:none;width:18px;height:18px;margin-top:.2em;
  border-radius:999px;border:1px solid var(--edge);box-shadow:var(--inset-sm)}
.lev-quiz__opcao:hover{border-color:var(--accent-txt)}
.lev-quiz input:checked + .lev-quiz__opcao{
  box-shadow:0 0 0 1px var(--accent-txt), var(--inset-sm);border-color:var(--accent-txt);
  background:color-mix(in srgb, var(--accent-txt) 12%, var(--surface));font-weight:600}
.lev-quiz input:checked + .lev-quiz__opcao::before{background:var(--accent-txt);
  box-shadow:inset 0 0 0 4px var(--surface)}
.lev-quiz input:focus-visible + .lev-quiz__opcao{outline:2px solid var(--accent-txt);outline-offset:3px}
.lev-quiz__acoes{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:var(--s4);margin-top:var(--s8)}
.lev-quiz__acoes .lev-btn:only-child{margin-left:auto}
.lev-quiz__aviso{min-height:1.5em;margin-top:var(--s4)}
.lev-quiz__legal{font-size:.82rem;line-height:1.65;color:var(--body);margin-top:var(--s4)}
.lev-quiz__custo{font-size:1.15rem;line-height:1.55;color:var(--txt)}
.lev-quiz__custo b{color:var(--accent-txt);font-weight:600}
/* o resultado: o que a pessoa contou (afundado), o caminho ideal em
   destaque (borda e selo na cor do produto) e os outros caminhos menores,
   cada um com a cor do próprio produto, para não parecerem o mesmo */
.lev-quiz__contou{margin-top:var(--s6);padding:var(--s6);border-radius:var(--r-md);box-shadow:var(--inset-sm)}
.lev-quiz__principal{position:relative;margin-top:var(--s12);padding:var(--s12) var(--s8) var(--s8);
  border-radius:var(--r-lg);border:2px solid var(--accent-txt);
  background:color-mix(in srgb, var(--accent) 7%, var(--surface));box-shadow:var(--elev-sm)}
.lev-quiz__selo{position:absolute;top:0;left:var(--s8);transform:translateY(-50%);padding:.4rem 1rem;
  border-radius:999px;background:var(--accent);color:var(--accent-on);
  font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.lev-quiz__produto{font-size:clamp(1.9rem,4.4vw,2.6rem);font-weight:700;letter-spacing:-.025em;line-height:1.08;
  color:var(--accent-txt)}
.lev-quiz__extras{display:grid;gap:var(--s4);margin-top:var(--s4)}
/* um ou dois caminhos: lado a lado, do mesmo tamanho */
@media(min-width:640px){.lev-quiz__extras{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}
.lev-quiz__extra{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s6);border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--edge);border-left:6px solid var(--accent-txt);color:var(--body);
  text-decoration:none;transition:border-color var(--t-base),transform var(--t-fast)}
@media(hover:hover){.lev-quiz__extra:hover{text-decoration:none;border-color:var(--accent-txt);transform:translateY(-2px)}}
.lev-quiz__extra-papel{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lev-quiz__extra-nome{font-size:1.3rem;font-weight:700;line-height:1.2;color:var(--accent-txt)}
.lev-quiz__extra-texto{font-size:.95rem;line-height:1.55}
.lev-quiz__extra-cta{margin-top:auto;padding-top:var(--s2);font-weight:600;color:var(--accent-txt)}
@media(max-width:560px){
  .lev-quiz__principal{padding:var(--s12) var(--s6) var(--s6)}
  .lev-quiz__selo{left:var(--s6)}
  .lev-quiz__principal .lev-btn{width:100%;justify-content:center}
}

/* diálogo, o quiz aberto por cima da Home */
/* sombra só para baixo, sem o par de luz do relevo: sobre o fundo escurecido
   a luz (--sl) virava um halo claro em volta do diálogo */
.lev-dialogo{border:0;padding:0;margin:auto;color:var(--body);background:var(--surface);
  border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(0,0,0,.35);
  width:min(760px,calc(100% - 2rem));max-height:calc(100dvh - 2rem);overflow:auto}
/* diálogo de formulário curto (a biblioteca, o Lev Express): mais estreito que o quiz */
.lev-dialogo--estreito{width:min(520px,calc(100% - 2rem))}
.lev-dialogo::backdrop{background:rgba(0,0,0,.62)}
.lev-dialogo__topo{position:sticky;top:0;z-index:1;display:flex;justify-content:flex-end;
  padding:var(--s4);background:var(--surface)}
.lev-dialogo__corpo{padding:0 var(--s6) var(--s12)}
@media(min-width:720px){.lev-dialogo__corpo{padding:0 var(--s12) var(--s12)}}
body.is-dialogo-aberto{overflow:hidden}
@media(prefers-reduced-motion:reduce){.lev-quiz__barra span,.lev-quiz__opcao{transition:none}}

/* ---------- 18. LLP v4, CENAS DE ROLAGEM ---------------- */
/* (O pedido chamava esta seção de 17; o 17 já é o quiz.)

   Três componentes que prendem um palco e deixam a rolagem dirigir a
   mídia. Usados em lev-layout-pro-v4.html; o JS mora em
   assets/js/lev-llp-cenas.js.

   REGRA DE OURO: o estado padrão do CSS é o ESTADO FINAL, solto, sem
   nada preso. Só quando o script assume, e a pessoa não pediu menos
   movimento, o componente ganha .is-vivo e vira cena. Sem JS, com
   prefers-reduced-motion ou com falha de carregamento, a página fica
   inteira, legível e parada.

     .lev-cena       pista alta + palco preso, texto de um lado e mídia
                     do outro. Variantes: --fachada (hero) e --planta.
     .lev-fachada    as camadas da mídia do hero: traço, cor, guias e
                     projeções do cursor.
     .lev-roteiro    narrativa por gatilhos: figura, notas que trocam e
                     diagrama SVG com câmera por viewBox.
     .lev-rt-*       primitivas do desenho do diagrama.               */

/* --- cena ------------------------------------------------ */
.lev-cena{position:relative;--cena-ratio:4/3;--cena-curso:320vh;--cena-papel:#E8E8E8}
.lev-cena__palco{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s12);
  align-items:center;padding-block:var(--s16)}
.lev-cena.is-vivo{height:var(--cena-curso)}
.lev-cena.is-vivo .lev-cena__palco{position:sticky;top:0;height:calc(100vh - var(--rodape,0px));height:calc(100svh - var(--rodape,0px));padding-block:var(--s6)}

/* mídia: superfície afundada. A largura é o menor entre a coluna e o que
   cabe na altura da tela, na proporção da cena, a caixa nunca colapsa. */
.lev-cena__midia{position:relative;aspect-ratio:var(--cena-ratio);
  width:min(100%, calc((100svh - var(--rodape,0px) - var(--s24)) * var(--cena-ratio)));
  margin-inline:auto;border-radius:var(--r-lg);box-shadow:var(--inset-lg);
  overflow:hidden;background:var(--cena-papel)}
.lev-cena__camada{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;
  opacity:0;transition:opacity .35s ease}
.lev-cena__camada.is-ativo{opacity:1}

/* rótulo, contador e dica, o mesmo desenho dos rótulos do comparador */
.lev-cena__rotulo,.lev-cena__contador,.lev-cena__dica{position:absolute;border-radius:999px;pointer-events:none;
  font-weight:600;text-transform:uppercase;background:var(--surface);color:var(--txt);
  border:1px solid var(--edge-sub);transition:opacity .3s ease}
.lev-cena__rotulo,.lev-cena__contador{top:var(--s3);padding:.35rem .75rem;font-size:.64rem;letter-spacing:.14em}
.lev-cena__rotulo{left:var(--s3)}
.lev-cena__rotulo--depois{color:var(--accent-txt);opacity:0}
.lev-cena.is-depois .lev-cena__rotulo--antes{opacity:0}
.lev-cena.is-depois .lev-cena__rotulo--depois{opacity:1}
.lev-cena__contador{right:var(--s3);font-variant-numeric:tabular-nums;color:var(--accent-txt)}
.lev-cena__dica{bottom:var(--s3);left:50%;transform:translateX(-50%);padding:.4rem .9rem;white-space:nowrap;
  font-size:.7rem;letter-spacing:.12em;max-width:calc(100% - 2*var(--s3));overflow:hidden;text-overflow:ellipsis}
.lev-cena.is-tocado .lev-cena__dica{opacity:0}
/* parada, a cena não tem o que contar nem o que pedir */
.lev-cena:not(.is-vivo) .lev-cena__dica,
.lev-cena--fachada:not(.is-vivo) .lev-cena__contador,
.lev-cena--fachada:not(.is-vivo) .lev-cena__rotulo{display:none}
.lev-cena__legenda{margin-top:var(--s3);font-size:.78rem;color:var(--muted);min-height:1.4em;text-align:center}

/* passos ao lado da mídia: com a cena viva, o ativo acende e os outros esperam */
.lev-cena__passos{display:grid;gap:var(--s6);margin-top:var(--s8)}
.lev-cena.is-vivo .lev-cena__passo{opacity:.35;transition:opacity .4s ease}
.lev-cena.is-vivo .lev-cena__passo.is-ativo{opacity:1}

/* proporções do apartamento e das vistas (vieram do rascunho v3) */
.lev-cena--planta{--cena-ratio:1100/952}
/* Na planta, só a imagem muda (Carol, 12/10): o quadro perde a sombra
   interna, e a página nova aparece POR CIMA da anterior, que só some
   depois. Com as duas esmaecendo juntas, o fundo do quadro vazava no
   meio da troca. */
.lev-cena--planta .lev-cena__midia{box-shadow:none}
.lev-cena--planta .lev-cena__camada{transition:opacity 0s .35s}
.lev-cena--planta .lev-cena__camada.is-ativo{z-index:1;transition:opacity .35s ease}
.lev-cena--planta .lev-cena__contador,.lev-cena--planta .lev-cena__dica{z-index:2}
.lev-media--apto{aspect-ratio:3199/2761}
.lev-media--vista{aspect-ratio:2446/919}

/* --- fachada: o hero que se desenha ---------------------- */
/* O papel é branco nos dois temas: a imagem final tem fundo branco, e uma
   folha de desenho é branca. O traço usa a tinta do desenho original. */
.lev-cena--fachada{--cena-ratio:990/610;--cena-curso:260vh;--cena-papel:#FFFFFF;--traco:#4B4B48}
.lev-cena--fachada .lev-cena__palco{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
/* sem sombra interna: sobre papel branco, no tema escuro, ela vira uma vinheta suja */
.lev-cena--fachada .lev-cena__midia{box-shadow:none;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.lev-fachada__linha,.lev-fachada__cor,.lev-fachada__guias,.lev-fachada__projecao{
  position:absolute;inset:0;width:100%;height:100%;max-width:none}
.lev-fachada__linha svg{display:block;width:100%;height:100%;max-width:none}
.lev-fachada__linha .linework{stroke:var(--traco)}
.lev-fachada__linha path{vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.lev-fachada__cor{display:block;object-fit:fill}
.lev-fachada__guias{pointer-events:none;opacity:0}
.lev-fachada__projecao{pointer-events:none;opacity:0;overflow:visible}

/* viva: o JS escreve --revela, --linha-op, --cor-op, --guia-op e --guia-escala */
.lev-cena--fachada.is-vivo .lev-fachada__linha{opacity:var(--linha-op,1)}
.lev-cena--fachada.is-vivo .lev-fachada__cor{opacity:var(--cor-op,0);clip-path:inset(var(--revela,50%) 0);
  will-change:clip-path,opacity}
.lev-cena--fachada.is-vivo .lev-fachada__guias{opacity:var(--guia-op,0)}
.lev-fachada__guia{position:absolute;left:0;right:0;height:1px;background:var(--accent);
  transform:scaleX(var(--guia-escala,.35))}
.lev-fachada__guia::before,.lev-fachada__guia::after{content:'';position:absolute;top:-3px;width:0;height:0;
  border-top:4px solid transparent;border-bottom:4px solid transparent}
.lev-fachada__guia::before{left:0;border-right:7px solid var(--accent)}
.lev-fachada__guia::after{right:0;border-left:7px solid var(--accent)}
.lev-fachada__guia--topo{top:var(--revela,50%)}
.lev-fachada__guia--base{bottom:var(--revela,50%)}

/* Entre a primeira pintura e o script assumir, a imagem espera escondida
   para não piscar. Se o script nunca chegar, ela aparece sozinha em 3 s:
   conteúdo invisível é pior que cena sem animação. */
@media(prefers-reduced-motion:no-preference){
  [data-motion="js"] .lev-cena--fachada:not(.is-vivo):not(.is-parado) .lev-fachada__cor{
    opacity:0;animation:lev-fachada-rede .4s ease 3s forwards}
  [data-motion="js"] .lev-cena--fachada:not(.is-parado) .lev-cena__palco{
    min-height:calc(100vh - var(--rodape,0px));min-height:calc(100svh - var(--rodape,0px))}
}
@keyframes lev-fachada-rede{to{opacity:1}}

/* projeções do cursor, detalhe para ponteiro fino, depois da cena completa */
.lev-fachada__projecao path,.lev-fachada__projecao line{fill:none;stroke:var(--traco);stroke-opacity:.45;
  stroke-width:.75;stroke-dasharray:2 3;vector-effect:non-scaling-stroke}
.lev-fachada__projecao .lev-fachada__marca{stroke:var(--accent);stroke-opacity:1;stroke-width:1;stroke-dasharray:none}
.lev-fachada__projecao line{stroke-opacity:.75;stroke-width:.9;stroke-dasharray:3 4}
.lev-fachada__projecao{transition:opacity .42s cubic-bezier(.16,1,.3,1)}
.lev-cena__midia.is-guiando .lev-fachada__projecao{opacity:1;transition-duration:80ms}
.lev-fachada__mira{position:absolute;left:var(--cx,50%);top:var(--cy,50%);width:30px;height:30px;
  pointer-events:none;opacity:0;transform:translate(-50%,-50%);transition:opacity 90ms ease}
.lev-fachada__mira::before,.lev-fachada__mira::after{content:'';position:absolute;left:50%;top:50%;
  background:var(--accent);transform:translate(-50%,-50%)}
.lev-fachada__mira::before{width:30px;height:1px}
.lev-fachada__mira::after{width:1px;height:30px}
.lev-cena__midia.is-projetando{cursor:none}
.lev-cena__midia.is-projetando .lev-fachada__mira{opacity:1}
@media(hover:none),(pointer:coarse){
  .lev-fachada__mira,.lev-fachada__projecao{display:none}
  .lev-cena__midia.is-projetando{cursor:auto}
}

/* --- roteiro: figura, notas e diagrama ------------------- */
.lev-roteiro{position:relative;
  --rt-tinta:var(--txt);--rt-apoio:var(--body);--rt-borda:var(--edge);
  --rt-cartao:var(--sl);--rt-papel:var(--surface);
  --rt-alerta:var(--danger);--rt-ok:var(--success);
  --rt-alerta-suave:var(--surface);--rt-ok-suave:var(--surface);--rt-plugin-suave:var(--surface)}
@supports (color:color-mix(in srgb, red 10%, blue)){
  .lev-roteiro{
    --rt-alerta-suave:color-mix(in srgb, var(--danger) 16%, var(--surface));
    --rt-ok-suave:color-mix(in srgb, var(--success) 16%, var(--surface));
    --rt-plugin-suave:color-mix(in srgb, var(--accent-txt) 18%, var(--surface))}
}
.lev-roteiro__palco{max-width:1240px;margin-inline:auto;padding:var(--s12) var(--s6)}
.lev-roteiro__topo .lev-body{margin-top:var(--s2);max-width:62ch}
.lev-roteiro__corpo{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(16px,3vw,48px);margin-top:var(--s8)}
.lev-roteiro__figura{position:relative;width:clamp(96px,16vw,220px);aspect-ratio:394/903;align-self:start}
.lev-roteiro__figura img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  object-position:bottom center;opacity:0}
.lev-roteiro:not(.is-vivo) .lev-roteiro__figura img:last-child{opacity:1}
.lev-roteiro__coluna{display:flex;flex-direction:column;min-width:0;gap:var(--s8)}
.lev-roteiro__notas{position:relative;max-width:720px}
.lev-roteiro__trilho{display:flex;flex-direction:column;gap:var(--s4)}
.lev-roteiro__nota{border-radius:var(--r-md);box-shadow:var(--inset-sm);border:1px solid transparent;
  padding:var(--s4) var(--s6)}
.lev-roteiro__nota .lev-h3{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.25;margin-bottom:var(--s1)}
.lev-roteiro__nota p{max-width:62ch}
.lev-roteiro__n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:999px;
  border:1px solid var(--edge-sub);font-size:.8rem;font-weight:600;color:var(--accent-txt);
  font-variant-numeric:tabular-nums;margin-bottom:var(--s2)}
.lev-roteiro--problema .lev-roteiro__nota.is-fecho{border-color:var(--danger)}
.lev-roteiro--solucao .lev-roteiro__nota.is-fecho{border-color:var(--success)}
.lev-roteiro__diagrama svg{display:block;width:100%;height:auto;color:var(--rt-apoio)}
.lev-roteiro__gatilhos{display:none}

/* vivo: palco preso, uma nota por vez, diagrama ocupando o que sobra */
.lev-roteiro.is-vivo .lev-roteiro__palco{position:sticky;top:0;height:calc(100vh - var(--rodape,0px));height:calc(100svh - var(--rodape,0px));
  display:flex;flex-direction:column;
  padding:clamp(20px,4.5vh,44px) var(--s6) clamp(16px,3vh,32px)}
.lev-roteiro.is-vivo .lev-roteiro__corpo{flex:1;min-height:0;grid-template-rows:minmax(0,1fr);
  margin-top:clamp(12px,2.5vh,28px)}
.lev-roteiro.is-vivo .lev-roteiro__figura{width:auto;height:100%;align-self:stretch}
.lev-roteiro.is-vivo .lev-roteiro__figura img{transition:opacity .7s ease}
.lev-roteiro.is-vivo .lev-roteiro__figura img.is-on{opacity:1}
.lev-roteiro.is-vivo .lev-roteiro__coluna{min-height:0;gap:clamp(10px,2.4vh,26px);padding-top:clamp(0px,2vh,24px)}
.lev-roteiro.is-vivo .lev-roteiro__notas{overflow:hidden;height:var(--slot,auto);flex:none}
.lev-roteiro.is-vivo .lev-roteiro__trilho{gap:18px;transform:translateY(var(--desloca,0px));will-change:transform}
.lev-roteiro.is-vivo .lev-roteiro__nota{height:var(--slot,auto);flex:none;opacity:var(--op,1)}
.lev-roteiro.is-vivo .lev-roteiro__notas.is-medindo,
.lev-roteiro.is-vivo .lev-roteiro__notas.is-medindo .lev-roteiro__nota{height:auto}
.lev-roteiro.is-vivo .lev-roteiro__diagrama{flex:1;min-height:0;position:relative;overflow:hidden}
.lev-roteiro.is-vivo .lev-roteiro__diagrama svg{position:absolute;inset:0;width:100%;height:100%}
.lev-roteiro.is-vivo .lev-roteiro__gatilhos{display:block;position:relative;
  margin-top:calc(var(--rodape,0px) - 100vh);margin-top:calc(var(--rodape,0px) - 100svh);pointer-events:none}
.lev-roteiro__gatilho{height:70vh}
/* o último gatilho é mais alto para o fecho ficar preso tempo de ler */
.lev-roteiro__gatilho:last-child{height:130vh}

/* as partes do diagrama entram por passo; o atraso vem de data-atraso,
   que o JS copia para --atraso */
.lev-roteiro.is-vivo .lev-rt-g{opacity:0;transform:translateY(10px);
  transition:opacity .6s ease var(--atraso,0s),transform .6s ease var(--atraso,0s)}
.lev-roteiro.is-vivo .lev-rt-g.is-on{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){
  .lev-roteiro.is-p3 .lev-rt-gira{animation:lev-rt-gira 4s linear infinite}
  .lev-roteiro.is-p5 .lev-rt-gira-ciclo{animation:lev-rt-gira 2.4s linear infinite}
  .lev-roteiro.is-p5 .lev-rt-folha-regen{animation:lev-rt-regen 2.4s ease-in-out infinite}
  .lev-roteiro.is-p5 .lev-rt-modelo-regen{animation:lev-rt-regen 2.4s ease-in-out infinite reverse}
}
.lev-rt-gira,.lev-rt-gira-ciclo{transform-box:fill-box;transform-origin:center}
@keyframes lev-rt-gira{to{transform:rotate(360deg)}}
@keyframes lev-rt-regen{0%,65%,100%{opacity:1}30%{opacity:.2}}

/* primitivas do diagrama */
.lev-roteiro__diagrama text{font-family:inherit;fill:var(--rt-tinta)}
.lev-rt-tinta{fill:none;stroke:var(--rt-tinta);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.lev-rt-fina{stroke-width:.9}
.lev-rt-cartao{fill:var(--rt-cartao)}
.lev-rt-borda{stroke:var(--rt-borda);stroke-width:1.2}
.lev-rt-papel{fill:var(--rt-papel)}
.lev-rt-traco{fill:none;stroke:var(--rt-apoio);stroke-width:1.3;stroke-dasharray:5 5}
.lev-rt-caixa{fill:none;stroke:var(--rt-apoio);stroke-width:1.2;stroke-dasharray:5 6}
.lev-rt-alerta{fill:none;stroke:var(--rt-alerta);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.lev-rt-alerta-ponto{fill:var(--rt-alerta)}
.lev-rt-alerta-suave{fill:var(--rt-alerta-suave);stroke:var(--rt-alerta);stroke-width:1.4}
.lev-rt-alerta-cartao{fill:var(--rt-alerta-suave);stroke:var(--rt-alerta);stroke-width:1.6}
.lev-rt-alerta-pilula{fill:var(--rt-alerta)}
.lev-rt-mudanca{fill:var(--rt-alerta-suave)}
.lev-rt-ok-suave{fill:var(--rt-ok-suave)}
.lev-rt-plugin-suave{fill:var(--rt-plugin-suave)}
.lev-rt-num{fill:var(--rt-papel);stroke:var(--rt-borda)}
.lev-rt-ok-cartao{fill:var(--rt-ok-suave);stroke:var(--rt-ok);stroke-width:1.8}
.lev-rt-ok{fill:none;stroke:var(--rt-ok);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lev-rt-t-titulo{font-size:16px;font-weight:600}
.lev-rt-t-titulo.is-menor{font-size:13.5px}
.lev-roteiro__diagrama text.lev-rt-t-sub{font-size:12.5px;fill:var(--rt-apoio)}
.lev-roteiro__diagrama text.lev-rt-t-ferramenta{font-size:13px;font-weight:500;fill:var(--rt-apoio)}
.lev-rt-t-tarefa{font-size:12.5px}
.lev-rt-t-tarefa.is-forte,.lev-rt-t-apoio.is-forte{font-weight:600}
.lev-rt-t-resultado{font-size:22px;font-weight:700}
.lev-rt-t-resultado.is-menor{font-size:17px}
.lev-rt-t-apoio{font-size:14px}
.lev-rt-t-num{font-size:12.5px;font-weight:600}
.lev-rt-t-chip{font-size:11.5px;font-weight:600}
.lev-roteiro__diagrama text.lev-rt-t-pilula{font-size:12.5px;font-weight:600;fill:var(--rt-papel)}
.lev-roteiro__diagrama text.is-alerta{fill:var(--rt-alerta)}
.lev-roteiro__diagrama text.is-ok{fill:var(--rt-ok)}
/* marcas miúdas dentro das pranchas do diagrama: pontos, circuitos, cotas */
.lev-rt-m-azul{fill:var(--accent-txt)}   .lev-rt-m-verm{fill:var(--danger)}
.lev-rt-m-ambar{fill:var(--warning)}     .lev-rt-m-verde{fill:var(--success)}
.lev-rt-m-lilas{fill:var(--muted)}
.lev-rt-s-verm{stroke:var(--danger)}     .lev-rt-s-ambar{stroke:var(--warning)}

/* entreato, as duas figuras e a pergunta que vira a página */
.lev-entreato{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s8)}
.lev-entreato__par{display:flex;align-items:flex-end;gap:clamp(16px,5vw,64px)}
.lev-entreato__par img{height:clamp(200px,38vh,400px);width:auto}
.lev-entreato__antes{opacity:.4}
.lev-entreato__seta{font-size:1.75rem;color:var(--muted);padding-bottom:18%}
.lev-entreato .lev-h2{max-width:18ch;font-size:clamp(1.8rem,4.4vw,3.2rem);line-height:1.05}

/* --- telas estreitas e telas baixas ---------------------- */
/* No celular a barra fixa de compra (.lev-barra, ~76 px) cobre o pé da tela:
   o palco preso desconta essa altura para nada ficar atrás dela. */
@media(max-width:899px){
  body.has-barra .lev-cena,body.has-barra .lev-roteiro{--rodape:76px}
}
@media(max-width:880px){
  .lev-roteiro__palco,.lev-roteiro.is-vivo .lev-roteiro__palco{padding-inline:var(--s4)}
  .lev-roteiro.is-vivo .lev-roteiro__palco{padding-block:var(--s4) var(--s3)}
  .lev-roteiro__topo .lev-h2{font-size:1.5rem}
  .lev-roteiro.is-vivo .lev-roteiro__topo .lev-body{display:none}
  .lev-roteiro__corpo{grid-template-columns:26% minmax(0,1fr);column-gap:var(--s3);row-gap:var(--s3);margin-top:var(--s3)}
  .lev-roteiro.is-vivo .lev-roteiro__corpo{grid-template-rows:auto minmax(0,1fr);margin-top:var(--s3)}
  .lev-roteiro__figura,.lev-roteiro.is-vivo .lev-roteiro__figura{width:100%;height:auto;grid-column:1;grid-row:1;align-self:end}
  .lev-roteiro__coluna{display:contents}
  .lev-roteiro__notas{grid-column:2;grid-row:1;align-self:end}
  .lev-roteiro:not(.is-vivo) .lev-roteiro__figura{align-self:start}
  .lev-roteiro__nota{padding:var(--s3) var(--s4)}
  .lev-roteiro.is-vivo .lev-roteiro__trilho{gap:12px}
  .lev-roteiro__n{width:24px;height:24px;font-size:.75rem;margin-bottom:var(--s1)}
  .lev-roteiro__nota .lev-h3{font-size:1.05rem}
  .lev-roteiro__nota p{font-size:.95rem;line-height:1.45}   /* 15,2 px: o piso do corpo */
  .lev-roteiro__diagrama{grid-column:1/-1;grid-row:2}
}
@media(max-width:820px){
  .lev-cena__palco,.lev-cena--fachada .lev-cena__palco{grid-template-columns:1fr;gap:var(--s6);align-content:center}
  .lev-cena.is-vivo .lev-cena__palco{padding-block:var(--s4)}
  .lev-cena__midia{width:min(100%, calc(36svh * var(--cena-ratio)))}
  .lev-cena--planta .lev-cena__midia-bloco{order:-1}
  .lev-cena .lev-display{font-size:clamp(1.75rem,7vw,2.4rem)}
  .lev-cena .lev-lead{font-size:1rem;line-height:1.5}
  .lev-cena__extra{display:none}
  .lev-cena__passos{margin-top:var(--s4)}
  .lev-cena.is-vivo .lev-cena__passo{display:none}
  .lev-cena.is-vivo .lev-cena__passo.is-ativo{display:block}
  .lev-cena--planta .lev-h2{font-size:1.3rem}
}
/* tela baixa de computador: o texto da cena aperta antes de estourar o palco */
@media(min-width:821px) and (max-height:760px){
  .lev-cena .lev-display{font-size:clamp(2rem,4vw,2.9rem)}
  .lev-cena .lev-cena__extra{display:none}
  .lev-cena.is-vivo .lev-cena__passo{display:none}
  .lev-cena.is-vivo .lev-cena__passo.is-ativo{display:block}
  .lev-roteiro.is-vivo .lev-roteiro__topo .lev-body{display:none}
}
@media(max-width:820px) and (max-height:700px){
  .lev-cena.is-vivo .lev-cena__palco{padding-block:var(--s2);gap:var(--s4)}
  .lev-cena.is-vivo .lev-cena__marca,.lev-cena--planta.is-vivo .lev-eyebrow{display:none}
  .lev-cena--fachada.is-vivo .lev-lead{margin-top:var(--s3)}
  .lev-cena--fachada.is-vivo .lev-row{margin-top:var(--s4)}
  .lev-cena--planta.is-vivo .lev-h2{font-size:1.15rem;margin-top:0}
  .lev-cena.is-vivo .lev-cena__passo .lev-body{font-size:.95rem;line-height:1.45}
  .lev-cena__midia{width:min(100%, calc(28svh * var(--cena-ratio)))}
  .lev-cena--planta .lev-cena__midia{width:min(100%, calc(33svh * var(--cena-ratio)))}
}
@media(prefers-reduced-motion:reduce){
  .lev-cena__camada,.lev-cena__rotulo,.lev-cena__contador,.lev-cena__dica,.lev-cena__passo,
  .lev-roteiro__figura img,.lev-rt-g,.lev-fachada__projecao,.lev-fachada__mira{transition:none}
}

/* ---------- 19. COMPONENTES DAS PAGINAS ------------------- */
.lev-conceito-pecas{display:grid;gap:var(--s4);grid-template-columns:repeat(4,1fr)}
.lev-conceito-pecas figcaption{font-size:.76rem;color:var(--muted);margin-top:var(--s2);text-align:center}
@media(max-width:900px){.lev-conceito-pecas{grid-template-columns:repeat(2,1fr)}}

.lev-catalogo{display:grid;gap:var(--s3);grid-template-columns:repeat(5,1fr)}
.lev-catalogo figcaption{font-size:.72rem;color:var(--muted);margin-top:var(--s2)}
@media(max-width:900px){.lev-catalogo{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.lev-catalogo{grid-template-columns:repeat(2,1fr)}}

.lev-indice{position:fixed;right:var(--s6);top:50%;transform:translateY(-50%);
  display:none;flex-direction:column;gap:var(--s3);z-index:30}
@media(min-width:1340px){.lev-indice{display:flex}}
.lev-indice a{display:flex;align-items:center;gap:var(--s3);text-decoration:none;
  font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);opacity:.55;transition:opacity var(--t-base),color var(--t-base)}
.lev-indice a::before{content:'';width:16px;height:1px;background:currentColor;transition:width var(--t-base)}
.lev-indice a:hover{opacity:1;color:var(--txt)}
.lev-indice a.is-ativo{opacity:1;color:var(--accent-txt)}
.lev-indice a.is-ativo::before{width:30px}
.lev-indice a:focus-visible{outline:2px solid var(--accent-txt);outline-offset:4px;opacity:1}
.lev-pedidos{display:grid;gap:var(--s4);grid-template-columns:repeat(3,1fr)}
.lev-pedido{display:flex;flex-direction:column;border-radius:var(--r-md);box-shadow:var(--inset-sm);padding:var(--s6);
  font-size:.95rem;color:var(--txt)}
/* quem pediu fica no pé do cartão, na mesma linha em toda a fileira */
.lev-pedido cite{display:block;font-style:normal;font-size:.76rem;color:var(--muted);margin-top:auto;padding-top:var(--s3)}
@media(max-width:900px){.lev-pedidos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.lev-pedidos{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.lev-indice a::before{transition:none}}

/* na coluna estreita (termos, privacidade, obrigado, boleto, 404, blocos de
   texto das páginas largas), o texto vai até a borda dela, como o título, o
   índice, as listas e a tabela; com a medida de 56 e 70ch o parágrafo parava
   antes do que estava logo abaixo (Arthur, 13/10) */
.lev-wrap--narrow :is(.lev-body, .lev-lead){max-width:none}
.lev-legal h2{margin-top:var(--s16)}
.lev-legal h2:first-of-type{margin-top:var(--s8)}
.lev-legal h3{margin-top:var(--s8)}
.lev-legal p+p{margin-top:var(--s4)}
.lev-legal__indice{border-radius:var(--r-lg);box-shadow:var(--inset-lg);padding:var(--s8)}
.lev-legal__indice ol{list-style:none;counter-reset:item;columns:2;column-gap:var(--s8)}
@media(max-width:720px){.lev-legal__indice ol{columns:1}}
.lev-legal__indice li{counter-increment:item;break-inside:avoid;margin-bottom:var(--s3)}
/* número e texto lado a lado: item que quebra linha continua alinhado
   com o texto, não volta para baixo do número */
.lev-legal__indice a{display:inline-flex;align-items:baseline;color:var(--body);text-decoration:none;font-size:.95rem}
.lev-legal__indice a::before{content:counter(item,decimal-leading-zero) " ";flex:none;min-width:1.6em;
  color:var(--accent-txt);font-variant-numeric:tabular-nums;font-weight:600;margin-right:var(--s2)}
.lev-legal__indice a:hover{color:var(--txt)}
.lev-legal__tabela{width:100%;border-collapse:collapse;margin-top:var(--s6)}
.lev-legal__tabela th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);font-weight:600;padding:var(--s3) var(--s4) var(--s3) 0;border-bottom:1px solid var(--edge)}
.lev-legal__tabela td{padding:var(--s4) var(--s4) var(--s4) 0;border-bottom:1px solid var(--edge-sub);
  font-size:.95rem;vertical-align:top}
.lev-legal__tabela td:first-child{color:var(--txt);width:45%}
@media(max-width:640px){
  .lev-legal__tabela,.lev-legal__tabela tbody,.lev-legal__tabela tr,.lev-legal__tabela td{display:block;width:100%}
  .lev-legal__tabela thead{display:none}
  .lev-legal__tabela tr{padding-block:var(--s4);border-bottom:1px solid var(--edge-sub)}
  .lev-legal__tabela td{border:0;padding:0}
  .lev-legal__tabela td:first-child{width:100%;font-weight:600;margin-bottom:var(--s2)}
}

.lev-plugins__fases{aspect-ratio:1080/200}
.lev-ia-hero-orbita{overflow:hidden;overflow:clip}
.lev-ia-orbita{position:relative;width:100%;max-width:460px;aspect-ratio:1;margin-inline:auto;
  display:flex;align-items:center;justify-content:center}
.lev-ia-orbita__anel{position:absolute;border-radius:999px}
.lev-ia-orbita__anel--fora{width:96%;height:96%;box-shadow:var(--elev-lg)}
.lev-ia-orbita__anel--dentro{width:74%;height:74%;box-shadow:var(--inset-lg)}
.lev-ia-orbita__nucleo{position:absolute;width:48%;height:48%;border-radius:999px;z-index:2;
  background:var(--ia);box-shadow:var(--elev-md);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center}
.lev-ia-orbita__nucleo .lev-lockup__lev{color:#fff;font-size:.62rem}
.lev-ia-orbita__nucleo .lev-lockup__nome{color:#fff;font-size:1.35rem}
.lev-ia-orbita__nucleo small{display:block;margin-top:var(--s3);font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
.lev-ia-orbita__pista{position:absolute;inset:0;z-index:1}
.lev-ia-orbita__pista--a{animation:lev-ia-orbita-gira 34s linear infinite}
.lev-ia-orbita__pista--b{animation:lev-ia-orbita-gira 46s linear infinite reverse}
.lev-ia-orbita__satelite{position:absolute;border-radius:999px}
.lev-ia-orbita__pista--a .lev-ia-orbita__satelite{animation:lev-ia-orbita-gira 34s linear infinite reverse}
.lev-ia-orbita__pista--b .lev-ia-orbita__satelite{animation:lev-ia-orbita-gira 46s linear infinite}
.lev-ia-orbita__satelite--1{top:2%;right:14%;width:19%;height:19%;box-shadow:var(--elev-md)}
.lev-ia-orbita__satelite--2{bottom:11%;left:3%;width:23%;height:23%;box-shadow:var(--elev-lg)}
.lev-ia-orbita__satelite--3{bottom:24%;right:2%;width:12%;height:12%;box-shadow:var(--inset-lg)}
.lev-ia-orbita__satelite--4{top:19%;left:6%;width:14%;height:14%;box-shadow:var(--elev-sm)}
@keyframes lev-ia-orbita-gira{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.lev-ia-ferramentas{display:grid;gap:var(--s4);grid-template-columns:repeat(3,1fr)}
.lev-ia-ferramenta{display:flex;flex-direction:column;gap:var(--s3)}
.lev-ia-ferramenta h3{font-size:1rem;font-weight:600;color:var(--txt);margin:0}
.lev-ia-ferramenta p{font-size:1rem;color:var(--body);margin:0}
.lev-ia-ferramenta__numero{font-size:.66rem;font-weight:600;letter-spacing:.14em;color:var(--accent-txt);
  font-variant-numeric:tabular-nums;display:block}
/* O exemplo de cada ferramenta, no pé do cartão: o par antes e depois em
   dois quadrados, ou uma imagem ou um vídeo numa faixa 2:1 (a mesma altura
   do par). No celular os cartões correm para o lado (.lev-rolo). */
.lev-ia-ferramenta__amostra{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);margin-top:auto}
.lev-ia-ferramenta__quadro{position:relative;margin:0;aspect-ratio:1;overflow:hidden;border-radius:var(--r-md)}
.lev-ia-ferramenta__quadro img{display:block;width:100%;height:100%;object-fit:cover}
.lev-ia-ferramenta__amostra--faixa{grid-template-columns:1fr}
.lev-ia-ferramenta__amostra--faixa > img,.lev-ia-ferramenta__amostra--faixa > video{display:block;width:100%;height:auto;
  aspect-ratio:2/1;object-fit:cover;border-radius:var(--r-md);background:var(--surface)}
.lev-ia-ferramenta__rotulo{position:absolute;left:var(--s2);top:var(--s2);padding:.25rem .6rem;border-radius:999px;
  font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;
  background:var(--surface);color:var(--txt);border:1px solid var(--edge-sub)}
.lev-ia-ferramenta__rotulo--depois{color:var(--accent-txt)}
/* onde recortar uma imagem ou um vídeo quadrado numa faixa (data-foco) */
[data-foco="0"]{object-position:50% 0}
[data-foco="25"]{object-position:50% 25%}
[data-foco="50"]{object-position:50% 50%}
[data-foco="75"]{object-position:50% 75%}
[data-foco="100"]{object-position:50% 100%}
.lev-ia-planos{display:grid;gap:var(--s6);grid-template-columns:repeat(3,1fr)}
.lev-ia-plano{display:flex;flex-direction:column}
.lev-ia-plano--destaque{box-shadow:var(--elev-lg)}
@media(max-width:900px){.lev-ia-ferramentas,.lev-ia-planos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.lev-ia-planos{grid-template-columns:1fr}}
/* O momento: o texto na largura de leitura e, embaixo, o vídeo na largura
   toda do conteúdo, centralizado e alinhado às duas bordas (Arthur, 13/10:
   na coluna do texto ele ficava preso à esquerda). A capa é um quadro do
   próprio vídeo (img/lev-ia/video-ia-na-arquitetura.webp). */
.lev-split.lev-ia-momento{grid-template-columns:minmax(0,1fr);gap:var(--s8)}
.lev-ia-momento > :first-child{max-width:46rem}
@media(prefers-reduced-motion:reduce){.lev-ia-orbita__pista,.lev-ia-orbita__satelite{animation:none}}

.lev-btn:disabled{cursor:not-allowed;opacity:.6}

/* ---------- 16. VENDA ------------------------------------ */
/* O kit da compra, igual em todas as páginas de produto (aprovado pelo
   Arthur em 09/10): preço final na cor do produto, a mesma do botão; valor
   antigo riscado em vermelho; check verde no que entra; X vermelho no que
   não entra. Sem ícone genérico nem emoji: o marcador é o símbolo do produto
   e a garantia é o selo.                                                  */

/* pílula do topo e a parte do título que ganha a cor */
.lev-pilula{display:flex;width:fit-content;align-items:center;padding:.4rem .9rem;border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent-txt) 45%, transparent);
  background:color-mix(in srgb, var(--accent) 22%, transparent);
  font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-txt)}
.lev-destaque{color:var(--accent-txt)}

/* passos curtos em chips */
.lev-passos-curtos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);list-style:none}
.lev-passos-curtos li{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);border-radius:var(--r-md);
  box-shadow:var(--inset-sm);font-weight:600;color:var(--txt)}
.lev-passos-curtos b{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;
  border-radius:999px;background:var(--cta,var(--accent));color:var(--cta-on,var(--accent-on));font-size:.8rem}
@media(max-width:720px){.lev-passos-curtos{grid-template-columns:minmax(0,1fr)}}

/* o valor ao lado do botão (topo e barra fixa) */
.lev-valor{font-weight:700;color:var(--accent-txt);font-variant-numeric:tabular-nums}
.lev-microcopy{margin-top:var(--s3);font-size:.92rem;color:var(--body)}
.lev-microcopy b{color:var(--txt)}

/* o que entra e o que não entra */
.lev-sim,.lev-nao{flex:none;width:20px;height:20px}
.lev-sim circle{fill:color-mix(in srgb, var(--success) 18%, transparent)}
.lev-sim path{fill:none;stroke:var(--success);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lev-nao circle{fill:color-mix(in srgb, var(--danger) 18%, transparent)}
.lev-nao path{fill:none;stroke:var(--danger);stroke-width:2.2;stroke-linecap:round}

/* linha de confiança: o marcador é o símbolo do produto */
.lev-confianca{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;list-style:none;font-size:.88rem;color:var(--body)}
/* o marcador fica fora do texto: com flex, "<b>18</b> ferramentas" virava
   dois pedaços com um vão no meio */
.lev-confianca li{position:relative;padding-left:1.35rem}
.lev-confianca b{color:var(--txt)}
/* o "D" da Lev Design, nos cursos e nas páginas da marca */
.lev-confianca li::before{content:'';position:absolute;left:0;top:.8em;transform:translateY(-50%);
  width:8px;height:12px;border-radius:0 999px 999px 0;background:var(--accent-txt)}
/* o paralelogramo do Lev Layout PRO, que também vale para os plugins */
[data-frente="sistemas"] .lev-confianca li::before,
[data-frente="plugins"] .lev-confianca li::before{width:14px;height:8px;border-radius:0;
  clip-path:polygon(22% 0,100% 0,78% 100%,0 100%)}
/* o anel do Lev IA */
[data-frente="ia"] .lev-confianca li::before{width:11px;height:11px;border-radius:999px;
  background:none;border:3px solid var(--accent-txt)}

/* selo de garantia pequeno, ao lado do botão */
.lev-garantia-curta{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s6)}
.lev-garantia-curta .lev-confianca{flex-direction:column;flex-wrap:nowrap;gap:.3rem;font-size:.82rem}
.lev-selinho{flex:none;width:60px;height:60px;border-radius:999px;border:1.5px solid var(--accent-txt);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
  font-size:.56rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-txt)}
.lev-selinho b{font-size:1.4rem;letter-spacing:-.02em;color:var(--txt);margin-bottom:.12rem}

/* o cartão da oferta, dentro da faixa cheia */
.lev-oferta{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s12);
  margin-top:var(--s12);padding:var(--s12);border-radius:var(--r-xl);
  background:var(--surface);color:var(--body);text-align:left;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.lev-oferta--so-preco{grid-template-columns:minmax(0,1fr);max-width:560px}
.lev-oferta__selo{position:absolute;top:-15px;left:var(--s12);padding:.4rem 1rem;border-radius:999px;
  background:var(--cta,var(--accent));color:var(--cta-on,var(--accent-on));
  font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.lev-oferta__preco{display:flex;flex-direction:column;justify-content:center;
  padding-left:var(--s12);border-left:1px solid var(--edge-sub)}
.lev-oferta--so-preco .lev-oferta__preco{padding-left:0;border-left:0}
.lev-oferta__preco .lev-btn{margin-top:var(--s6);width:100%}
/* a linha de pagamento, igual em todo produto, logo embaixo do botão */
.lev-oferta__pagamento{margin-top:var(--s3);line-height:1.45}
.lev-oferta__de{font-size:1rem;color:var(--muted)}
.lev-oferta__de s{color:var(--danger);font-variant-numeric:tabular-nums}
.lev-oferta__valor{margin-top:var(--s2);font-size:clamp(3.2rem,7.4vw,4.8rem);font-weight:700;letter-spacing:-.045em;
  line-height:.95;color:var(--accent-txt);font-variant-numeric:tabular-nums}
.lev-oferta__valor small{font-size:.3em;font-weight:600;letter-spacing:0;color:var(--body);margin-left:.35rem}
.lev-oferta__parcela{margin-top:var(--s3);font-size:1.08rem;color:var(--body)}
.lev-oferta__parcela b{color:var(--txt)}
.lev-economia{align-self:flex-start;display:inline-flex;margin-top:var(--s4);padding:.45rem .95rem;border-radius:999px;
  font-weight:700;font-size:.9rem;color:var(--success);background:color-mix(in srgb, var(--success) 15%, transparent)}
.lev-oferta__extra{margin-top:var(--s8)}
@media(max-width:860px){
  .lev-oferta{grid-template-columns:minmax(0,1fr);gap:var(--s8);padding:var(--s12) var(--s6) var(--s8)}
  .lev-oferta__selo{left:var(--s6)}
  .lev-oferta__preco{padding-left:0;border-left:0;padding-top:var(--s8);border-top:1px solid var(--edge-sub)}
  .lev-oferta--so-preco .lev-oferta__preco{padding-top:0;border-top:0}
}

/* a pilha: o que entra, com o valor de cada item riscado */
.lev-pilha{list-style:none}
.lev-pilha li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:var(--s3);align-items:start;
  padding:var(--s3) 0;border-bottom:1px solid var(--edge-sub)}
.lev-pilha .lev-sim{margin-top:.15rem}
.lev-pilha b{display:block;color:var(--txt);font-weight:600;line-height:1.35}
.lev-pilha small{display:block;margin-top:.15rem;color:var(--muted);font-size:.84rem;line-height:1.45}
.lev-pilha s{color:var(--danger);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:.92rem}
/* quando o item não é dinheiro (1 ano, 2 envios, incluso) */
.lev-pilha__valor{color:var(--txt);white-space:nowrap;font-size:.92rem}
.lev-pilha__total{display:flex;justify-content:space-between;gap:var(--s4);padding-top:var(--s4);
  font-weight:700;color:var(--body)}
.lev-pilha__total s{color:var(--danger);white-space:nowrap}
@media(max-width:560px){.lev-pilha small{display:none}}

/* o gancho: dois caminhos lado a lado */
.lev-escolha{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6);margin-top:var(--s12);align-items:stretch}
.lev-opcao{position:relative;display:flex;flex-direction:column;padding:var(--s8);border-radius:var(--r-lg);
  border:1px solid var(--edge);background:var(--surface)}
.lev-opcao--forte{border:2px solid var(--accent-txt);box-shadow:var(--elev-lg)}
.lev-opcao .lev-oferta__selo{left:var(--s8)}
.lev-opcao__nome{font-size:1.25rem;font-weight:700;color:var(--txt)}
.lev-opcao__preco{margin-top:var(--s2);font-size:2.2rem;font-weight:700;letter-spacing:-.03em;
  color:var(--accent-txt);font-variant-numeric:tabular-nums}
.lev-opcao__preco small{font-size:.42em;font-weight:500;color:var(--body);letter-spacing:0}
.lev-opcao ul{list-style:none;margin:var(--s6) 0 var(--s8);flex:1}
.lev-opcao li{display:flex;gap:.6rem;align-items:flex-start;padding:.4rem 0;font-size:.96rem;color:var(--txt)}
.lev-opcao li .lev-sim,.lev-opcao li .lev-nao{margin-top:.15rem}
.lev-opcao li.is-nao{color:var(--body)}
.lev-diferenca{margin-top:var(--s6);padding:var(--s4) var(--s6);border-radius:var(--r-md);box-shadow:var(--inset-sm);
  color:var(--txt);font-size:1.02rem}
.lev-diferenca b{color:var(--accent-txt)}
@media(max-width:720px){
  .lev-escolha{grid-template-columns:minmax(0,1fr)}
  .lev-opcao{padding:var(--s6)}
  .lev-opcao .lev-oferta__selo{left:var(--s6)}
}

/* garantia com o selo grande */
.lev-garantia{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s8);align-items:center}
.lev-garantia__selo{width:132px;aspect-ratio:1;border-radius:999px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;border:2px solid var(--accent-txt);color:var(--txt)}
.lev-garantia__selo b{font-size:2.6rem;line-height:1;letter-spacing:-.03em}
.lev-garantia__selo span{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-txt)}
@media(max-width:860px){.lev-garantia{grid-template-columns:minmax(0,1fr);justify-items:start}}

/* prova rápida: o número grande e as frases dos alunos em cartões */
.lev-prova-rapida{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s12);align-items:center}
.lev-prova-rapida .lev-stat__n{font-size:clamp(3.2rem,8vw,5rem);letter-spacing:-.045em;line-height:.95}
.lev-prova-rapida .lev-stat__l{margin-top:var(--s2);font-size:.95rem}
.lev-citacoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);list-style:none}
.lev-citacao{padding:var(--s6);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--elev-sm);
  color:var(--txt);font-weight:600;line-height:1.45}
.lev-citacao span{display:block;margin-top:var(--s2);color:var(--muted);font-size:.84rem;font-weight:400}
@media(max-width:860px){
  .lev-prova-rapida{grid-template-columns:minmax(0,1fr);gap:var(--s8)}
  .lev-citacoes{grid-template-columns:minmax(0,1fr)}
}

/* três cartões afundados, um por ideia */
.lev-tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);list-style:none}
.lev-tres li{padding:var(--s8) var(--s6);border-radius:var(--r-lg);box-shadow:var(--inset-lg);line-height:1.6}
.lev-tres b{display:block;font-size:1.15rem;color:var(--txt);margin-bottom:var(--s3);line-height:1.3}
@media(max-width:860px){.lev-tres{grid-template-columns:minmax(0,1fr)}}

/* barra fixa de compra (seção 10): o valor na cor do produto */
.lev-barra__preco .lev-valor{display:block;font-size:1.05rem}
.lev-oferta__dentro{grid-column:1/-1;padding-top:var(--s8);border-top:1px solid var(--edge-sub)}
/* dentro da faixa cheia o relevo neumórfico (a luz e a sombra cinzas) vira
   mancha na cor da frente: os cartões ganham uma sombra simples */
/* o cartão volta à cor de texto da superfície: sem isso ele herda o branco
   da faixa, e no tema claro o texto some no cartão claro */
.lev-faixa--cheia .lev-panel{box-shadow:0 24px 48px rgba(0,0,0,.3);color:var(--body)}
.lev-faixa--cheia .lev-aba{box-shadow:none}
.lev-faixa--cheia .lev-aba[aria-selected="true"]{box-shadow:var(--inset-sm)}

/* O kit de venda fora da oferta (Arthur, 09/10): o mesmo jeito de mostrar
   título, texto e valor em todo bloco que vende.
   - lista: o marcador é o símbolo do produto, como na linha de confiança;
   - item incluso: o nome forte, o texto no corpo, o valor separado em
     número tabular e o selo verde do que entra;
   - etapa: o número grande na cor do produto e o título. */
[data-frente] .lev-lista--marcada > li::before{top:.8em;transform:translateY(-50%);
  width:8px;height:12px;border-radius:0 999px 999px 0}
[data-frente="sistemas"] .lev-lista--marcada > li::before,
[data-frente="plugins"] .lev-lista--marcada > li::before{width:14px;height:8px;border-radius:0;
  clip-path:polygon(22% 0,100% 0,78% 100%,0 100%)}
[data-frente="ia"] .lev-lista--marcada > li::before{width:11px;height:11px;border-radius:999px;
  background:none;border:3px solid var(--accent-txt)}
/* lista de produtos (a 404): cada item leva a frente dele, e o marcador vira
   o símbolo e a cor do produto */
.lev-lista--marcada > li:is([data-frente="sistemas"],[data-frente="plugins"])::before{width:14px;height:8px;border-radius:0;
  border:0;background:var(--accent-txt);clip-path:polygon(22% 0,100% 0,78% 100%,0 100%)}
.lev-lista--marcada > li[data-frente="ia"]::before{width:11px;height:11px;border-radius:999px;
  background:none;border:3px solid var(--accent-txt);clip-path:none}
.lev-lista--marcada > li[data-frente="educacao"]::before{width:8px;height:12px;border:0;border-radius:0 999px 999px 0;
  background:var(--accent-txt);clip-path:none}

.lev-incluso{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .65rem .2rem .3rem;border-radius:999px;
  font-size:.74rem;font-weight:700;letter-spacing:.02em;color:var(--success);
  background:color-mix(in srgb,var(--success) 12%,transparent)}
.lev-incluso .lev-sim{width:16px;height:16px}

/* o que você recebe: a imagem do item, o nome com o símbolo, o texto e,
   no pé, o valor separado com o selo do que entra */
.lev-recebe{display:flex;flex-direction:column;padding:0;overflow:hidden}
.lev-recebe__midia{aspect-ratio:16/10;background:var(--surface);overflow:hidden}
.lev-recebe__midia img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.lev-recebe__midia[data-encaixe="contida"]{display:grid;place-items:center;padding:var(--s6);background:#0d0d0d}
.lev-recebe__midia[data-encaixe="contida"] img{height:auto;object-fit:contain}
.lev-recebe__corpo{display:flex;flex-direction:column;gap:var(--s3);flex:1;padding:var(--s6) var(--s6) var(--s6)}
.lev-recebe__nome{display:flex;align-items:center;gap:.6rem;font-size:1.12rem;font-weight:700;line-height:1.25;color:var(--txt);margin:0}
.lev-recebe__nome::before{content:'';flex:none;width:16px;height:9px;background:var(--accent-txt);
  clip-path:polygon(22% 0,100% 0,78% 100%,0 100%)}
.lev-recebe__texto{font-size:.95rem;color:var(--body);margin:0}
.lev-recebe__pe{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--edge-sub)}
.lev-recebe__valor{display:flex;align-items:baseline;gap:.5rem;margin:0}
.lev-recebe__valor small{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lev-recebe__valor b{font-size:1.15rem;font-weight:800;color:var(--txt);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* o método: número grande na cor do produto, título e texto; a imagem
   troca de lado a cada etapa no computador */
.lev-etapa__n{display:block;font-size:3rem;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--accent-txt);
  font-variant-numeric:tabular-nums}
.lev-etapa__nome{font-size:1.5rem;font-weight:700;line-height:1.2;color:var(--txt);margin:var(--s4) 0 0}
@media(min-width:821px){.lev-etapa--inverte > .lev-media{order:-1}}

/* os plugins do sistema: as abas com a cara de cada um e, no painel, o
   texto ao lado do plugin em uso (um vídeo por categoria, escolhida nos
   botões de cima) */
.lev-plugins__abas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.lev-plugins__aba{display:flex;align-items:center;gap:var(--s4);width:100%;min-height:72px;padding:var(--s4) var(--s6);
  border-radius:var(--r-md);border:1px solid var(--edge);background:var(--surface);color:var(--body);
  font:inherit;text-align:left;cursor:pointer;box-shadow:var(--elev-sm)}
.lev-plugins__aba[aria-selected="true"]{border-color:var(--accent-txt);color:var(--txt);box-shadow:var(--inset-sm)}
.lev-plugins__aba:focus-visible{outline:2px solid var(--accent-txt);outline-offset:3px}
.lev-plugins__aba::before{content:'';flex:none;width:22px;height:13px;background:var(--accent-txt);opacity:.45;
  clip-path:polygon(22% 0,100% 0,78% 100%,0 100%)}
.lev-plugins__aba[aria-selected="true"]::before{opacity:1}
.lev-plugins__aba span{display:flex;flex-direction:column;gap:.1rem}
.lev-plugins__aba small{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lev-plugins__aba b{font-size:1.05rem;font-weight:700}
.lev-plugin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s12);align-items:start}
.lev-plugin__valor{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .75rem;margin-top:var(--s3);font-size:.9rem;color:var(--muted)}
.lev-plugin__valor s{color:var(--danger);font-variant-numeric:tabular-nums}
.lev-plugin__categorias{display:flex;flex-wrap:wrap;gap:var(--s2)}
.lev-plugin__categoria{min-height:36px;padding:.35rem .85rem;border-radius:999px;border:1px solid var(--edge);
  background:none;color:var(--body);font:inherit;font-size:.82rem;font-weight:600;cursor:pointer}
.lev-plugin__categoria[aria-pressed="true"]{border-color:var(--accent-txt);color:var(--accent-txt);
  background:color-mix(in srgb,var(--accent-txt) 10%,transparent)}
.lev-plugin__categoria:focus-visible{outline:2px solid var(--accent-txt);outline-offset:2px}
.lev-plugin__tela{position:relative;margin-top:var(--s4);aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;
  background:var(--surface);border:1px solid var(--edge-sub)}
.lev-plugin__tela video{display:block;width:100%;height:100%;object-fit:cover}
.lev-plugin__legenda{margin-top:var(--s3);font-size:.9rem;color:var(--body)}
.lev-plugin__legenda b{color:var(--txt)}
@media(max-width:820px){
  .lev-plugin{grid-template-columns:minmax(0,1fr);gap:var(--s8)}
  .lev-plugins__aba{min-height:64px;padding:var(--s3) var(--s4)}
  .lev-plugin__categorias{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1*var(--s6));
    padding-inline:var(--s6)}
  .lev-plugin__categorias::-webkit-scrollbar{display:none}
  .lev-plugin__categoria{flex:none}
}
@media(max-width:560px){.lev-plugins__abas{grid-template-columns:minmax(0,1fr)}}

/* exemplos em lista (ExemplosEmVideo.tsx, Blocos Dinâmicos na página dos
   plugins): a lista numerada, com o texto de cada categoria, é o seletor;
   a linha inteira é o botão. O vídeo da escolhida fica parado ao lado
   enquanto a lista corre e, no celular, abre dentro da categoria. */
.lev-exemplos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s12);align-items:start}
.lev-exemplos__lista{list-style:none;border-top:1px solid var(--edge-sub)}
.lev-exemplos__item{position:relative;padding:var(--s6) var(--s4) var(--s6) 3.5rem;
  border-bottom:1px solid var(--edge-sub);transition:background var(--t-base)}
.lev-exemplos__item.is-ativo{background:color-mix(in srgb, var(--accent-txt) 7%, transparent)}
.lev-exemplos__item.is-ativo::before{content:'';position:absolute;left:0;top:var(--s4);bottom:var(--s4);
  width:3px;border-radius:3px;background:var(--accent-txt)}
.lev-exemplos__titulo{margin:0;font-size:1.15rem;font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--txt)}
.lev-exemplos__botao{display:block;width:100%;padding:0;border:0;background:none;font:inherit;
  color:inherit;text-align:left;cursor:pointer}
.lev-exemplos__botao::after{content:'';position:absolute;inset:0}
.lev-exemplos__botao:hover,.lev-exemplos__botao[aria-pressed="true"]{color:var(--accent-txt)}
.lev-exemplos__botao:focus-visible{outline:none}
.lev-exemplos__botao:focus-visible::after{outline:2px solid var(--accent-txt);outline-offset:-2px}
.lev-exemplos__n{position:absolute;left:var(--s4);top:calc(var(--s6) + .3rem);font-size:.8rem;font-weight:600;
  letter-spacing:.08em;color:var(--accent-txt);font-variant-numeric:tabular-nums}
.lev-exemplos__texto{margin-top:var(--s2);font-size:.95rem;color:var(--body)}
.lev-exemplos__palco{position:sticky;top:var(--s8)}
.lev-exemplos__tela{position:relative;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;
  background:var(--surface);border:1px solid var(--edge-sub)}
.lev-exemplos__tela video{display:block;width:100%;height:100%;object-fit:cover}
.lev-exemplos__rotulo{position:absolute;left:var(--s3);bottom:var(--s3);padding:.35rem .8rem;border-radius:999px;
  font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  background:var(--surface);color:var(--txt);border:1px solid var(--edge-sub);pointer-events:none}
.lev-exemplos__tela--celular{display:none}
@media(max-width:820px){
  .lev-exemplos{grid-template-columns:minmax(0,1fr)}
  .lev-exemplos__palco{display:none}
  .lev-exemplos__item.is-ativo .lev-exemplos__tela--celular{display:block;margin-top:var(--s4)}
}
@media(prefers-reduced-motion:reduce){.lev-exemplos__item{transition:none}}

/* as duas cenas do diagnóstico (plugins): a frase que fecha cada uma fica
   no pé do cartão, na mesma linha nos dois */
.lev-cena{display:flex;flex-direction:column}
.lev-cena > :last-child{margin-top:auto;padding-top:var(--s6)}

/* ---------- 20. TRILHO E DEPOIMENTOS ---------------------- */
/* Trilho (Trilho.tsx): a lista que corre para o lado. No celular o
   cartão seguinte aparece pela metade na borda da tela, que é o convite
   para arrastar; a partir de 640px cabem dois e, a partir de 1000px,
   três. A barra embaixo mostra quanto já foi visto. */
.lev-trilho{--trilho-gap:var(--s4);--trilho-cartao:84%;display:grid;gap:var(--s3)}
@media(min-width:640px){.lev-trilho{--trilho-gap:var(--s6);--trilho-cartao:calc((100% - var(--trilho-gap))/2)}}
@media(min-width:1000px){.lev-trilho{--trilho-cartao:calc((100% - 2*var(--trilho-gap))/3)}}
.lev-trilho__lista{display:flex;gap:var(--trilho-gap);list-style:none;overflow-x:auto;
  overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin-inline:calc(-1*var(--s6));padding:var(--s3) var(--s6) var(--s4);scroll-padding-inline:var(--s6)}
.lev-trilho__lista::-webkit-scrollbar{display:none}
.lev-trilho__lista > li{flex:0 0 var(--trilho-cartao);min-width:0;scroll-snap-align:start}
.lev-trilho__lista:focus-visible{outline-offset:-2px}
.lev-trilho__controles{display:flex;align-items:center;gap:var(--s3)}
.lev-trilho.is-cabe .lev-trilho__controles{display:none}
.lev-trilho__barra{position:relative;flex:1;height:4px;margin-right:var(--s3);border-radius:999px;
  background:var(--edge);overflow:hidden}
.lev-trilho__barra::before{content:'';position:absolute;top:0;bottom:0;border-radius:inherit;
  left:calc(var(--ini,0)*100%);width:calc(var(--vis,.34)*100%);background:var(--accent-txt);
  transition:left .2s ease-out,width .2s ease-out}
.lev-trilho__seta{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:999px;
  cursor:pointer;background:var(--surface);color:var(--txt);border:1px solid var(--edge);box-shadow:var(--elev-sm)}
.lev-trilho__seta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.lev-trilho__seta:active{transform:translateY(1px);box-shadow:var(--inset-sm)}
.lev-trilho__seta[aria-disabled="true"]{opacity:.4;cursor:default;box-shadow:none;transform:none}
@media(prefers-reduced-motion:reduce){.lev-trilho__barra::before{transition:none}}

/* depoimento real (Depoimentos.tsx): rosto e nome antes do texto, como
   numa mensagem; o texto corta em sete linhas e abre no "Ler tudo" */
.lev-depoimento > figure{height:100%;display:flex;flex-direction:column;gap:var(--s4);
  padding:var(--s6);border-radius:var(--r-md);box-shadow:var(--inset-sm)}
.lev-depoimento__autor{display:flex;align-items:center;gap:var(--s3);color:var(--txt);line-height:1.25}
.lev-depoimento__foto{flex:none;width:56px;height:56px;border-radius:999px;object-fit:cover;
  border:2px solid var(--accent-txt)}
/* sem foto: as iniciais do nome, como na plataforma; a mensagem sem nome, um balão */
.lev-depoimento__foto--sem{display:grid;place-items:center;
  background:color-mix(in srgb, var(--accent-txt) 12%, var(--surface));color:var(--accent-txt);
  font-size:1.05rem;font-weight:700;letter-spacing:.04em;line-height:1}
.lev-depoimento__foto--sem svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linejoin:round}
.lev-depoimento__texto{font-size:.95rem;line-height:1.6;color:var(--txt);overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;line-clamp:7}
.lev-depoimento__texto.is-aberto{display:block;overflow:visible;-webkit-line-clamp:unset;line-clamp:none}
.lev-depoimento__mais{align-self:flex-start;margin-top:auto;min-height:44px;padding:0;border:0;
  background:none;font:inherit;font-size:.9rem;font-weight:600;color:var(--accent-txt);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.lev-depoimento__autor b{display:block}
.lev-depoimento__autor small{display:block;margin-top:2px;font-size:.8rem;color:var(--muted)}

/* período do plano (Lev IA, Planos.tsx): um controle só, com título,
   bolinha de opção, a metade escolhida cheia na cor do produto e a
   etiqueta verde do anual saindo pela borda de cima */
.lev-periodo{min-width:0;margin-inline:0;padding:0;border:0}
.lev-periodo__titulo{padding:0;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--txt)}
.lev-faixa--cheia .lev-periodo__titulo{color:var(--accent-on)}
.lev-periodo__opcoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1);max-width:560px;
  margin-top:var(--s6);padding:var(--s1);border-radius:999px;background:var(--surface);border:1px solid var(--edge);
  box-shadow:0 14px 32px rgba(0,0,0,.28)}
.lev-periodo__opcao{position:relative;display:block;cursor:pointer}
.lev-periodo__opcao input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.lev-periodo__caixa{display:flex;align-items:center;justify-content:center;gap:var(--s3);min-height:60px;
  padding:var(--s2) var(--s4);border-radius:999px;color:var(--txt);transition:background var(--t-base),color var(--t-base)}
@media(hover:hover){.lev-periodo__opcao:hover .lev-periodo__caixa{background:color-mix(in srgb,var(--accent) 12%,transparent)}}
.lev-periodo__opcao input:checked + .lev-periodo__caixa{background:var(--accent);color:var(--accent-on)}
.lev-periodo__opcao input:focus-visible + .lev-periodo__caixa{outline:2px solid var(--txt);outline-offset:2px}
.lev-periodo__marca{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:999px;border:2px solid currentColor}
.lev-periodo__opcao input:checked + .lev-periodo__caixa .lev-periodo__marca::after{content:'';width:10px;height:10px;
  border-radius:999px;background:currentColor}
.lev-periodo__nome{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.lev-periodo__nome b{font-size:1.05rem}
.lev-periodo__nome small{font-size:.78rem;opacity:.85}
.lev-periodo__etiqueta{position:absolute;top:-16px;right:10px;padding:.22rem .65rem;border-radius:999px;
  background:var(--success);color:var(--surface);font-size:.7rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.25);pointer-events:none}
@media(max-width:420px){
  .lev-periodo__caixa{gap:var(--s2);padding-inline:var(--s3)}
  .lev-periodo__nome small{font-size:.72rem}
}
/* em cada plano mensal, quanto ele sai no anual; o clique troca o período */
.lev-ia-plano__anual{align-self:flex-start;display:inline-flex;align-items:center;gap:.4em;margin-top:var(--s4);
  min-height:44px;padding:.5rem 1rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--success) 55%,transparent);
  background:color-mix(in srgb,var(--success) 10%,transparent);color:var(--success);font:inherit;font-size:.88rem;
  font-weight:600;line-height:1.3;text-align:left;cursor:pointer}
@media(hover:hover){.lev-ia-plano__anual:hover{background:color-mix(in srgb,var(--success) 18%,transparent)}}
.lev-ia-plano s{color:var(--danger)}

/* Rolo: no celular, a grade vira uma fila que corre para o lado, com o
   próximo item aparecendo pela metade na borda da tela (o convite para
   arrastar). No computador continua grade. Para cartões e galerias que
   se repetem; texto que se lê em ordem continua empilhado. */
@media(max-width:720px){
  .lev-grid.lev-rolo,.lev-split.lev-rolo,.lev-ia-ferramentas.lev-rolo{display:flex;gap:var(--s4);overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;align-items:stretch;
    margin-inline:calc(-1*var(--s6));padding:var(--s2) var(--s6) var(--s4);scroll-padding-inline:var(--s6)}
  .lev-rolo::-webkit-scrollbar{display:none}
  .lev-rolo > *{flex:0 0 82%;min-width:0;scroll-snap-align:start}
  .lev-rolo--estreito > *{flex-basis:62%}
}

/* ---------- 21. HOME ------------------------------------- */
/* o guia: o convite para o quiz. Destaque neutro (a marca mãe não tem cor
   própria): borda forte e selo na cor do texto. Sem lista de frentes: o
   teste é que indica, o convite não adianta a resposta */
.lev-guia{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s8) var(--s12);
  padding:var(--s12);border-radius:var(--r-lg);border:2px solid var(--txt);background:var(--surface);
  box-shadow:var(--elev-md)}
.lev-guia__texto{flex:1 1 420px;min-width:0}
.lev-guia__selo{display:inline-flex;align-items:center;padding:.4rem .95rem;border-radius:999px;
  background:var(--txt);color:var(--surface);font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.lev-guia__btn{flex:none}
@media(max-width:640px){
  .lev-guia{padding:var(--s8) var(--s6)}
  /* o texto do botão inteiro numa linha só, até 360 px */
  .lev-guia__btn{width:100%;justify-content:center;padding-inline:1rem;font-size:.95rem}
}

/* o cartão do que é grátis: borda na cor da frente, selo e botão */
.lev-card--gratis{position:relative;border:2px solid var(--accent)}
.lev-card__selo{position:absolute;top:var(--s8);left:var(--s8);z-index:1;padding:.35rem .85rem;border-radius:999px;
  background:var(--accent);color:var(--accent-on);font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.lev-card__btn{margin-top:var(--s4);align-self:flex-start}
@media(max-width:560px){.lev-card__btn{align-self:stretch;justify-content:center}}

/* os plugins avulsos na Home: um cartão menor que as duas portas, na
   mesma linguagem, com a cor dos plugins só como marcador */
.lev-mini{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s4) var(--s6);padding:var(--s6) var(--s8);
  border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--edge);box-shadow:var(--elev-sm);
  color:var(--body);text-decoration:none;transition:box-shadow var(--t-base),transform var(--t-fast)}
.lev-mini:hover{text-decoration:none}
.lev-mini:active{transform:translateY(1.5px) scale(.995);box-shadow:var(--inset-sm)}
.lev-mini__sym{flex:none;width:auto;height:22px;color:var(--accent-txt)}
.lev-mini__texto{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:2px}
.lev-mini__rotulo{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-txt)}
.lev-mini__titulo{font-size:1.05rem;line-height:1.3;color:var(--txt)}
.lev-mini__desc{font-size:.92rem;line-height:1.5}
.lev-mini__btn{flex:none;padding:.7rem 1.3rem;font-size:.9rem}
@media(max-width:640px){.lev-mini{padding:var(--s6)}.lev-mini__btn{width:100%}}

/* a prova da Home: o número e a imprensa centralizados, os logos em
   linhas centradas (no celular, dois por linha e o último no meio) */
.lev-prova-home{display:flex;flex-direction:column;align-items:center;text-align:center}
.lev-prova-home__numero{font-size:clamp(3.4rem,10vw,5.5rem);font-weight:700;letter-spacing:-.045em;line-height:.95;
  color:var(--txt)}
.lev-prova-home__legenda{margin-top:var(--s3);font-size:1.05rem;color:var(--body)}
.lev-prova-home__rotulo{margin-top:var(--s12)}
/* largura inteira: sem ela a lista encolhe ao conteúdo e o último logo não centraliza */
.lev-prova-home .lev-imprensa{justify-content:center;width:100%;max-width:900px;margin-top:var(--s6)}
@media(max-width:720px){
  /* a regra geral do celular põe os logos numa grade alinhada à esquerda; aqui eles centralizam */
  .lev-prova-home .lev-imprensa{display:flex;flex-wrap:wrap;gap:var(--s6) var(--s4)}
  .lev-prova-home .lev-imprensa li{flex:0 0 calc(50% - var(--s2));display:flex;justify-content:center}
  .lev-prova-home .lev-imprensa img{object-position:center}
}

/* depoimento em vídeo (DepoimentosEmVideo.tsx): o story em pé, com a capa
   do próprio vídeo, o botão de tocar no meio e o perfil embaixo */
.lev-video-dep{display:flex;flex-direction:column;gap:var(--s3);margin:0}
.lev-video-dep__tela{position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:var(--r-md);
  background:#000;box-shadow:var(--elev-sm)}
.lev-video-dep__tela video{display:block;width:100%;height:100%;object-fit:cover}
.lev-video-dep__tocar{position:absolute;inset:0;display:grid;place-items:center;padding:0;border:0;cursor:pointer;
  color:#fff;background:linear-gradient(to top, rgba(0,0,0,.5), transparent 40%)}
.lev-video-dep__icone{display:grid;place-items:center;width:68px;height:68px;border-radius:999px;
  background:rgba(255,255,255,.94);color:#141414;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform var(--t-fast)}
.lev-video-dep__icone svg{width:28px;height:28px;margin-left:4px;fill:currentColor}
@media(hover:hover){.lev-video-dep__tocar:hover .lev-video-dep__icone{transform:scale(1.06)}}
.lev-video-dep__tocar:focus-visible{outline:2px solid #fff;outline-offset:-6px}
.lev-video-dep__tempo{position:absolute;right:var(--s3);bottom:var(--s3);padding:.15rem .6rem;border-radius:999px;
  background:rgba(0,0,0,.62);font-size:.8rem;font-weight:600}
.lev-video-dep__legenda{font-size:1rem;font-weight:700;line-height:1.3;color:var(--txt)}
/* no trilho os vídeos são em pé: cabem mais por tela */
.lev-trilho--videos{--trilho-cartao:62%}
@media(min-width:640px){.lev-trilho--videos{--trilho-cartao:calc((100% - 2*var(--trilho-gap))/3)}}
@media(min-width:1000px){.lev-trilho--videos{--trilho-cartao:calc((100% - 3*var(--trilho-gap))/4)}}
/* um vídeo só: ao lado do título dos depoimentos */
.lev-depo-topo{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px);gap:var(--s8) var(--s12);align-items:center}
@media(max-width:720px){
  .lev-depo-topo{grid-template-columns:minmax(0,1fr)}
  .lev-depo-topo .lev-video-dep{width:min(100%,280px);justify-self:center}
}

/* no celular, o topo das páginas de produto: o botão ocupa a largura toda,
   então a linha do preço e os tópicos centralizam embaixo dele, um tópico
   por linha, alinhados pelo marcador (Arthur, 09/10) */
@media(max-width:640px){
  main > section:first-of-type .lev-microcopy{text-align:center}
  main > section:first-of-type .lev-confianca{flex-direction:column;flex-wrap:nowrap;gap:.65rem;
    width:fit-content;margin-inline:auto;font-size:.95rem}
}

/* o cartão de cada plano do Lev IA (Planos.tsx): os anéis mostram o
   tamanho, os créditos vêm grandes com um medidor e o recomendado ganha
   selo; os botões ficam alinhados no pé dos três */
.lev-ia-plano{position:relative}
.lev-ia-plano__selo{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);padding:.4rem 1rem;
  border-radius:999px;background:var(--accent);color:var(--accent-on);font-size:.74rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.lev-ia-plano--destaque{outline:2px solid var(--accent-txt);outline-offset:-2px}
.lev-ia-plano__topo{display:flex;align-items:center;gap:var(--s3)}
.lev-ia-plano__simbolo{display:inline-flex;color:var(--accent-txt)}
.lev-ia-plano__simbolo svg{width:24px;height:24px}
.lev-ia-plano__simbolo svg + svg{margin-left:-7px}
.lev-ia-plano__nome{font-size:1.4rem;font-weight:700;line-height:1.2;color:var(--txt)}
.lev-ia-plano__para{margin-top:var(--s2);color:var(--body)}
/* lado a lado, a frase reserva duas linhas: os créditos e o preço ficam na mesma altura nos três */
@media(min-width:901px){.lev-ia-plano__para{min-height:3.3em}}
.lev-ia-plano__creditos{margin-top:var(--s6);padding:var(--s4) var(--s4) var(--s3);border-radius:var(--r-md);
  background:color-mix(in srgb, var(--accent) 10%, transparent)}
.lev-ia-plano__creditos p{color:var(--body)}
.lev-ia-plano__creditos b{font-size:1.3rem;color:var(--accent-txt)}
.lev-ia-plano__medidor{display:block;height:6px;margin-top:var(--s3);overflow:hidden;border-radius:999px;
  background:color-mix(in srgb, var(--accent) 20%, transparent)}
.lev-ia-plano__medidor span{display:block;height:100%;border-radius:inherit;background:var(--accent-txt)}
.lev-ia-plano[data-nivel="1"] .lev-ia-plano__medidor span{width:20%}
.lev-ia-plano[data-nivel="2"] .lev-ia-plano__medidor span{width:55%}
.lev-ia-plano[data-nivel="3"] .lev-ia-plano__medidor span{width:100%}
.lev-ia-plano__de{margin-top:var(--s2);font-size:.92rem;color:var(--body)}
.lev-ia-plano__acao{margin-top:auto;padding-top:var(--s8)}
/* três planos em duas colunas deixariam um buraco: até 900px, um por linha */
@media(max-width:900px){.lev-ia-planos{grid-template-columns:minmax(0,1fr);max-width:560px;margin-inline:auto}}

/* ---------- 21b. A MARCA DE CADA CURSO ------------------- */
/* Cada curso com a sua cor e o seu símbolo (MarcaCurso.tsx): na página
   de cursos os cinco pareciam um produto só (Arthur, 13/10). A cor marca;
   o fundo continua o da página. */
[data-curso="render"],[data-frente="render"]{  --curso:var(--render);   --curso-txt:var(--render-txt);   --curso-marca:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 108 108'%3E%3Cpath d='M0 0H100A50 50 0 0 1 0 0ZM0 100H100A50 50 0 0 0 0 100Z' fill='black' stroke='black' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E")}
[data-curso="enscape"],[data-frente="enscape"]{ --curso:var(--enscape);  --curso-txt:var(--enscape-txt);  --curso-marca:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 108 58'%3E%3Cpath d='M0 50H100A50 50 0 0 0 0 50Z' fill='black' stroke='black' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E")}
[data-curso="archviz"],[data-frente="archviz"]{ --curso:var(--archviz);  --curso-txt:var(--archviz-txt);  --curso-marca:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 108 108'%3E%3Cpath d='M50 2L96.5 98H3.5Z' fill='black' stroke='black' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E")}
[data-curso="conceito"],[data-frente="conceito"]{--curso:var(--conceito); --curso-txt:var(--conceito-txt); --curso-marca:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 80 108'%3E%3Cpath d='M0 100V36A36 36 0 0 1 72 36V100Z' fill='black' stroke='black' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E")}
[data-curso="maislev"],[data-frente="maislev"]{ --curso:var(--maislev);  --curso-txt:var(--maislev-txt);  --curso-marca:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 108 108'%3E%3Cpath d='M34 0H66V34H100V66H66V100H34V66H0V34H34Z' fill='black' stroke='black' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* o lockup: símbolo na cor do curso, "LEV" leve sobre o nome em bold.
   As alturas diferem de propósito: o olho compensa área (brandbook 05) */
/* vertical-align: sem ele a linha se alinha pela base do símbolo, e um
   símbolo mais alto empurrava o texto de baixo uns pixels (Render x Enscape) */
.lev-curso{gap:.75rem;vertical-align:top}
.lev-curso .lev-curso__simbolo{flex:none;width:auto;height:30px;color:var(--curso-txt)}
.lev-curso[data-curso="archviz"] .lev-curso__simbolo{height:32px}
.lev-curso[data-curso="maislev"] .lev-curso__simbolo{height:26px}
.lev-curso[data-curso="enscape"] .lev-curso__simbolo{height:17px}
.lev-curso .lev-lockup__lev,.lev-curso .lev-lockup__nome{text-transform:uppercase}
.lev-curso .lev-lockup__nome{margin-top:.22rem}

/* o cartão do curso: uma faixa na cor dele no alto, e o rótulo e o preço
   na mesma cor. Quando o cartão indica dois cursos, a faixa tem os dois */
.lev-card[data-curso],.lev-card--dupla{position:relative;overflow:hidden}
.lev-card[data-curso]::before,.lev-card--dupla::before{content:'';position:absolute;inset:0 0 auto;height:4px;
  background:var(--curso-txt)}
.lev-card--dupla::before{background:linear-gradient(90deg,var(--render-txt) 0 50%,var(--enscape-txt) 50% 100%)}
.lev-card[data-curso] .lev-card__kicker,.lev-card[data-curso] .lev-card__price,[data-curso] .lev-preco{color:var(--curso-txt)}
/* a chamada do cartão preenchida com a cor do curso (Carol, 14/10). O fundo
   é o tom -txt, que passa contra a superfície nos dois temas, então a
   superfície passa como texto sobre ele. No hover, o tom puxa para a cor
   do texto: clareia no escuro, escurece no claro, e o contraste só sobe. */
.lev-card[data-curso] .lev-card__ver{background:var(--curso-txt);color:var(--surface);border-color:var(--curso-txt)}
.lev-card--link[data-curso]:hover .lev-card__ver,.lev-card--link[data-curso]:focus-visible .lev-card__ver{
  background:color-mix(in srgb, var(--curso-txt) 80%, var(--txt));color:var(--surface);
  border-color:color-mix(in srgb, var(--curso-txt) 80%, var(--txt))}
.lev-card__marca{margin-bottom:var(--s3)}
.lev-card__marcas{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s4)}

/* o marcador da lista dentro de um curso é o símbolo dele; na página do
   curso, também o da linha de confiança do topo */
:is([data-frente="render"],[data-frente="enscape"],[data-frente="archviz"],[data-frente="conceito"],[data-frente="maislev"]) .lev-confianca li::before,
[data-curso] .lev-lista--marcada > li::before,
:is([data-frente="render"],[data-frente="enscape"],[data-frente="archviz"],[data-frente="conceito"],[data-frente="maislev"]) .lev-lista--marcada > li::before{width:12px;height:12px;border:0;border-radius:0;clip-path:none;
  background:var(--curso-txt);-webkit-mask:var(--curso-marca) center/contain no-repeat;mask:var(--curso-marca) center/contain no-repeat}

/* ---------- 22. CELULAR: UM EIXO SÓ ---------------------- */
/* No celular a leitura desce num eixo só: rótulo, título, texto, lista,
   cartão, preço e botão ficam no centro, com as mesmas margens; nada
   começa à esquerda enquanto o resto vai para o meio (Arthur, 13/10).
   Ficam à esquerda só o que é tabela (dúvidas, as linhas de preço da
   oferta, a conta, o fluxo da Lev Layout PRO, as alternativas do quiz) e
   o corpo dos textos longos (artigo do blog, termos e privacidade), com o
   título no centro. Lista numerada leva o número em cima. */
@media(max-width:720px){
  main,.lev-footer{text-align:center}
  main :is(.lev-faq, .lev-pilha, .lev-conta, .lev-fluxo__lista,
    .lev-quiz__opcoes, .lev-prosa, .lev-confianca, .lev-opcao ul){text-align:left}
  .lev-legal{text-align:left}
  .lev-legal > :is(.lev-eyebrow, h1, h1 + .lev-small, .lev-lead, .lev-strip){text-align:center}

  /* bloco com largura própria vai para o meio da coluna */
  main :is(.lev-display, .lev-h2, .lev-lead, .lev-body, .lev-pilula, .lev-recorte__logo){margin-inline:auto}
  main .lev-row,.lev-imprensa,.lev-strip,.lev-trilha,.lev-garantia-curta,.lev-recebe__nome,.lev-recebe__pe,
    .lev-plugin__valor,.lev-ia-plano__topo,.lev-passos-curtos li,.lev-plugins__aba,
    .lev-optin,.lev-abas__lista{justify-content:center}
  .lev-quiz__acoes .lev-btn:only-child{margin-inline:auto}
  /* quiz: "Pergunta 2 de 5" no meio, em cima da barra, como o título */
  .lev-quiz__progresso{flex-direction:column;gap:var(--s2)}
  .lev-quiz__barra{flex:none;width:100%}
  /* botões que viram cartão ou linha: o texto também no meio */
  button.lev-card,.lev-exemplos__botao,.lev-ia-plano__anual{text-align:center}
  .lev-ia-plano__anual{justify-content:center}
  /* abas dos dois plugins: o símbolo em cima do nome, como nas listas */
  .lev-plugins__aba{flex-direction:column;gap:var(--s2);text-align:center}
  .lev-selo,.lev-garantia{justify-items:center}
  .lev-confianca{flex-direction:column;flex-wrap:nowrap;width:fit-content;margin-inline:auto}
  .lev-garantia-curta .lev-confianca{margin-inline:0}
  .lev-economia,.lev-ia-plano__anual,.lev-depoimento__mais,.lev-panel__btn,.lev-card__btn{margin-inline:auto}
  .lev-card__marcas{align-items:center}
  .lev-panel__sym{align-self:center}
  .lev-opcao ul{align-self:center}
  .lev-oferta__preco,.lev-oferta__dentro{text-align:center}
  .lev-oferta__selo,.lev-opcao .lev-oferta__selo{left:50%;transform:translateX(-50%);white-space:nowrap}

  /* rótulo com o traço dos dois lados */
  .lev-eyebrow::after{content:'';display:inline-block;width:28px;height:2px;border-radius:2px;
    background:currentColor;vertical-align:middle;margin:-.2em 0 0 .7rem}
  .lev-card .lev-eyebrow::after,.lev-panel .lev-eyebrow::after{content:none}

  /* lista marcada: o símbolo em cima de cada item e o texto no centro */
  main .lev-lista > li + li{margin-top:var(--s6)}
  main .lev-lista--marcada > li{padding:1.4rem 0 0}
  :is(main, [data-frente]) .lev-lista--marcada > li::before{left:50%;top:2px;transform:translateX(-50%)}
  /* no texto longo (termos e privacidade) a lista segue a leitura, à esquerda */
  main .lev-legal .lev-lista > li + li{margin-top:var(--s3)}
  main .lev-legal .lev-lista--marcada > li{padding:0 0 0 var(--s6)}
  :is(main, [data-frente]) .lev-legal .lev-lista--marcada > li::before{left:0;top:.7em;transform:none}

  /* lista numerada (passos e a lista que troca o vídeo): o número em cima
     do título; a escolhida marca com um traço em cima, não do lado */
  main .lev-passos > li{padding:var(--s6) 0}
  main .lev-passos > li::before{position:static;display:block;margin-bottom:var(--s2)}
  .lev-exemplos__item{padding:var(--s6) var(--s4)}
  .lev-exemplos__n{position:static;display:block;margin-bottom:var(--s2)}
  .lev-exemplos__item.is-ativo::before{left:var(--s8);right:var(--s8);top:0;bottom:auto;width:auto;height:3px}
  .lev-exemplos__tela--celular{margin-inline:auto}
  /* nome do item que entra: o símbolo em cima, como na lista */
  .lev-recebe__nome{flex-direction:column;gap:var(--s2)}

  /* depoimento e autora do artigo: o rosto em cima do nome */
  .lev-depoimento__autor,.lev-autor{flex-direction:column;gap:var(--s2)}

  /* a trilha do topo (bloco, modelo, quantitativo, prancha) desce pelo meio */
  .lev-trilha{align-items:center}
  .lev-trilha li+li::before{margin-inline:auto}

  /* rodapé: marca, colunas e a linha final pelo meio */
  .lev-footer__frase{margin-inline:auto}
  .lev-footer a:not(.lev-footer__logo){margin-inline:auto}
  .lev-footer__legal{justify-content:center}
}

/* ---------- RASCUNHO: biblioteca de blocos (Carol, 15/10) ---------- */
/* o convite em Recursos: texto e botão lado a lado, como o guia da Home */
.lev-biblioteca{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s8) var(--s12)}
.lev-biblioteca > div{flex:1 1 420px;min-width:0}
/* o formulário na página da biblioteca, para quem chega sem cadastro */
.lev-biblioteca__porta{max-width:560px}
/* Visualizar: Lista / Miniatura. Texto, sem caixa; a opção ativa em
   negrito e sublinhada. Cada opção tem 44px de alvo de toque. */
.lev-vista{display:flex;align-items:center;gap:var(--s2);font-size:.95rem;color:var(--body)}
.lev-vista__rotulo{margin-right:var(--s2)}
.lev-vista__opcao{min-height:44px;padding:0 var(--s2);background:none;border:0;border-radius:var(--r-sm);
  font:inherit;color:var(--body);cursor:pointer}
.lev-vista__opcao[aria-pressed="true"]{color:var(--txt);font-weight:700;text-decoration:underline;text-underline-offset:.35em}

/* Os blocos. A imagem do bloco vem sobre fundo branco (é como o
   SketchUp exporta), então o quadro é branco nos dois temas: o bloco
   não fica num retângulo branco sobre o fundo escuro do site.
   Nada aqui é elevado: com dezenas de blocos, relevo viraria ruído. */
.lev-blocos{list-style:none;display:grid;gap:var(--s12) var(--s8);grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.lev-bloco__media{position:relative;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;background:#FFFFFF}
.lev-bloco__media img{width:100%;height:100%;object-fit:cover}
/* o botão de baixar: círculo no canto, contorno forte para aparecer
   sobre qualquer imagem */
.lev-bloco__baixar{position:absolute;right:var(--s4);bottom:var(--s4);width:56px;height:56px;border-radius:999px;
  display:grid;place-items:center;background:var(--surface);color:var(--txt);border:2px solid var(--txt);
  transition:background var(--t-fast), color var(--t-fast)}
.lev-bloco__baixar svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lev-bloco__baixar:hover{background:var(--txt);color:var(--surface)}
.lev-bloco__texto{margin-top:var(--s4);text-align:center}
.lev-bloco__titulo{font-size:1.05rem;font-weight:600;color:var(--txt)}
/* em miniatura só o nome: a descrição fica para a lista */
.lev-blocos[data-vista="miniatura"] :is(.lev-bloco__descricao,.lev-bloco__meta){display:none}

/* lista: uma linha por bloco, imagem pequena à esquerda */
.lev-blocos[data-vista="lista"]{grid-template-columns:1fr;gap:var(--s6)}
.lev-blocos[data-vista="lista"] .lev-bloco{display:grid;grid-template-columns:160px 1fr;gap:var(--s6);align-items:center;
  padding-bottom:var(--s6);border-bottom:1px solid var(--edge-sub)}
.lev-blocos[data-vista="lista"] .lev-bloco__baixar{right:var(--s2);bottom:var(--s2);width:44px;height:44px}
.lev-blocos[data-vista="lista"] .lev-bloco__baixar svg{width:20px;height:20px}
.lev-blocos[data-vista="lista"] .lev-bloco__texto{margin-top:0;text-align:left}
.lev-bloco__descricao{font-size:.95rem;margin-top:var(--s2)}
.lev-bloco__meta{font-size:.78rem;color:var(--muted);margin-top:var(--s2)}
@media(max-width:640px){
  .lev-blocos{grid-template-columns:repeat(2,1fr);gap:var(--s8) var(--s4)}
  .lev-bloco__baixar{width:44px;height:44px;right:var(--s2);bottom:var(--s2)}
  .lev-bloco__baixar svg{width:20px;height:20px}
  .lev-blocos[data-vista="lista"] .lev-bloco{grid-template-columns:96px 1fr;gap:var(--s4)}
}