/* ==========================================================================
   Autoescola Grand Prix · páginas por perfil (/toxicologico/ etc.)
   Carrega depois de scrollcraft.css e site.css: usa as cores, as placas, o CTA, a escolha
   da unidade, as dúvidas e o rodapé da home. Aqui fica só o que é próprio destas páginas.
   Tamanhos de letra nos degraus 12/14/16/18/20/24/30/36/48/60 px e espaços nos degraus
   2/4/8/12/16/24/32/40/48/64/80/96 px. Sem pin nem trilho: são páginas curtas e leves.
   ========================================================================== */

.lp-secao { padding-block: 4rem; }
@media (min-width: 1024px) { .lp-secao { padding-block: 6rem; } }
.lp-escuro { background: var(--asfalto); color: var(--placa); }
.lp-vermelho { background: var(--vermelho-chao); color: #fff; }
/* Chão das peças interativas: o quadriculado do "Seu trajeto" da home. Separa a seção de
   uma vizinha clara sem precisar de outra cor. */
.lp-quadriculado {
  background:
    linear-gradient(color-mix(in oklab, var(--tinta) 5%, transparent) 1px, transparent 1px) 0 0 / 100% 48px,
    linear-gradient(90deg, color-mix(in oklab, var(--tinta) 5%, transparent) 1px, transparent 1px) 0 0 / 48px 100%,
    var(--placa);
  box-shadow: inset 0 1px 0 var(--sc-hairline), inset 0 -1px 0 var(--sc-hairline);
}

.lp-titulo {
  margin: 0; max-width: 680px; text-wrap: balance;
  font-family: var(--sc-font-display); font-stretch: var(--largo); font-weight: 800;
  font-size: 1.875rem; line-height: 2.25rem; letter-spacing: -0.03em;
}
@media (min-width: 640px) { .lp-titulo { font-size: 2.25rem; line-height: 2.5rem; } }
@media (min-width: 1024px) { .lp-titulo { font-size: 3rem; line-height: 1; } }
.lp-texto { margin: 1.5rem 0 0; max-width: 680px; font-size: 1.125rem; line-height: 1.75rem; text-wrap: pretty; }
.lp-escuro .lp-texto { color: #D5CEC4; }
.chao-claro .lp-texto { color: #3F3A35; }
.lp-acao { margin-top: 2.5rem; }

/* ---------------------------------------------------------------- hero -- */
.lp-hero { background: var(--placa); color: var(--tinta); padding-bottom: 4rem; overflow: clip; }
@media (min-width: 1024px) { .lp-hero { padding-bottom: 6rem; } }
.lp-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; }
.lp-topo__marca { display: block; border-radius: 4px; }
.lp-topo__marca img { height: 2rem; width: auto; filter: brightness(0); }
.lp-topo__link {
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--tinta);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em;
  padding-block: 0.75rem;
}
@media (hover: hover) and (pointer: fine) { .lp-topo__link:hover { color: var(--vermelho-texto); } }

.lp-hero__grade {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: center; padding-top: 1.5rem;
}
@media (min-width: 900px) {
  .lp-hero__grade { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; padding-top: 3rem; }
}
.lp-selo {
  display: inline-block; margin: 0 0 1.5rem; padding: 0.25rem 0.5rem; border-radius: 4px;
  font: 800 0.75rem/1rem var(--sc-font-display); font-stretch: var(--largo); letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--tinta); color: var(--placa);
}
.lp-h1 {
  margin: 0; max-width: 680px; text-wrap: balance; color: var(--tinta);
  font-family: var(--sc-font-display); font-stretch: var(--largo); font-weight: 800;
  font-size: 2.25rem; line-height: 2.5rem; letter-spacing: -0.035em;
}
@media (min-width: 640px) { .lp-h1 { font-size: 3rem; line-height: 1; } }
@media (min-width: 1200px) { .lp-h1 { font-size: 3.75rem; line-height: 1; } }
.lp-h1 em { font-style: normal; color: var(--vermelho-texto); }
/* Título em duas frases: a segunda começa em linha nova, para nenhuma palavra ficar solta. */
.lp-h1--quebra em { display: block; }
.lp-sub {
  margin: 1.5rem 0 0; max-width: 680px; color: #3F3A35; text-wrap: pretty;
  font-size: 1.125rem; line-height: 1.75rem;
}
@media (min-width: 1200px) { .lp-sub { font-size: 1.25rem; line-height: 1.75rem; } }
.lp-hero .h-acoes { margin-top: 2rem; }
/* A home esconde o CTA do hero no celular (ele mora na barra). Aqui o visitante chega de
   anúncio e decide rápido: o botão fica à vista também no hero. */
.lp-hero .h-acoes .cta { display: inline-flex; }
.lp-prova {
  list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.5rem;
  font-size: 0.875rem; line-height: 1.25rem; color: #57514A;
}
.lp-prova li { display: flex; align-items: flex-start; gap: 0.5rem; text-wrap: pretty; }
.lp-prova .ico { width: 1.25rem; height: 1.25rem; color: var(--vermelho-texto); }

/* As placas do hero num poste, como as da home: o prazo do exame contado em placas. */
.lp-poste { position: relative; display: grid; gap: 0.75rem; justify-items: start; width: min(100%, 24rem); margin-inline: auto; padding-bottom: 4rem; }
.lp-poste::before {
  content: ""; position: absolute; z-index: 0; left: 3rem; top: -1.5rem; bottom: 0; width: 10px;
  background: linear-gradient(90deg, #7F7971, #CFC9BF 45%, #8A847C); border-radius: 2px;
}
.lp-poste::after {
  content: ""; position: absolute; left: calc(3rem + 5px); bottom: -0.5rem; width: 6rem; height: 1rem; translate: -50% 0;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.28), transparent);
}
.lp-poste .placa { z-index: 1; width: auto; min-width: 14rem; }
.lp-poste .placa:nth-child(2) { margin-left: 1.5rem; }
.lp-poste .placa:nth-child(3) { margin-left: 0.75rem; }
.lp-poste .placa p.lp-poste__detalhe { margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.25rem; }
.lp-poste .placa--continua p.lp-poste__detalhe { color: #FFE9E7; }
/* .placa p (site.css) é mais específico que uma classe só: por isso o seletor longo. */
.lp-poste .placa p.lp-poste__grande {
  margin: 0.75rem 0 0; font-family: var(--sc-font-display); font-stretch: var(--largo); font-weight: 800;
  font-size: 1.875rem; line-height: 2.25rem; letter-spacing: -0.03em; color: inherit;
}
@media (max-width: 639px) { .lp-poste .placa p.lp-poste__grande { font-size: 1.5rem; line-height: 2rem; } }

/* ------------------------------------------------- placas do problema -- */
.lp-placas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 900px) { .lp-placas { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 3rem; } }
.lp-placas .placa__titulo { font-size: 1.875rem; line-height: 2.25rem; }
.lp-placas .placa p { text-wrap: pretty; }
.lp-solucao {
  margin: 2.5rem 0 0; max-width: 680px; font-size: 1.25rem; line-height: 1.75rem; color: var(--placa); text-wrap: pretty;
}
.lp-solucao strong { color: #fff; }

/* ---------------------------------------------------------- benefícios -- */
.lp-lista {
  list-style: none; margin: 2.5rem 0 0; padding: 0; counter-reset: lp;
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 3rem; border-top: 2px solid var(--tinta);
}
@media (min-width: 900px) { .lp-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 3rem; } }
.lp-lista li {
  counter-increment: lp; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 0.75rem;
  padding-block: 1.5rem; border-bottom: 1px solid var(--sc-hairline);
}
.lp-lista li::before {
  content: counter(lp, decimal-leading-zero); grid-row: 1 / span 2;
  font: 800 0.875rem/1.75rem var(--sc-font-display); font-stretch: var(--largo); color: var(--vermelho-texto);
}
.lp-lista strong {
  display: block; font-family: var(--sc-font-display); font-stretch: var(--largo); font-weight: 800;
  font-size: 1.25rem; line-height: 1.75rem; letter-spacing: -0.015em;
}
.lp-lista p { margin: 0.25rem 0 0; color: #3F3A35; text-wrap: pretty; }

/* ------------------------------------------------- frase de destaque -- */
.lp-frase {
  margin: 0; max-width: 680px; text-wrap: balance;
  font-family: var(--sc-font-display); font-stretch: var(--largo); font-weight: 800;
  font-size: 2.25rem; line-height: 2.5rem; letter-spacing: -0.03em; color: var(--placa);
}
@media (min-width: 640px) { .lp-frase { font-size: 3rem; line-height: 1; } }
.lp-frase__linha { display: block; }
.lp-frase__linha + .lp-frase__linha { margin-top: 0.75rem; }
.lp-frase em { font-style: normal; color: #FF6B70; }
/* Cada palavra começa apagada (30%) e acende sozinha, na curva da skill. */
.lp-palavra { opacity: 0.3; transition: opacity 700ms var(--sc-ease-drawer); }
.lp-palavra.acesa { opacity: 1; }

/* -------------------------------------------------------- como funciona -- */
.lp-passos {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
}
.lp-passo { position: relative; padding: 0 0 2rem 3rem; }
.lp-passo:last-child { padding-bottom: 0; }
.lp-passo__ponto {
  position: absolute; z-index: 1; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--placa); box-shadow: inset 0 0 0 6px var(--vermelho);
}
.lp-passo:last-child .lp-passo__ponto { background: var(--vermelho); box-shadow: inset 0 0 0 6px var(--vermelho), 0 0 0 4px var(--placa), 0 0 0 7px var(--vermelho); }
.lp-passo:not(:last-child)::after {
  content: ""; position: absolute; left: 9px; top: 13px; bottom: -13px; width: 8px; border-radius: 4px; background: var(--vermelho);
}
.lp-passo h3 {
  margin: 0; font-family: var(--sc-font-display); font-stretch: var(--largo); font-weight: 800;
  font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em;
}
.lp-passo p { margin: 0.5rem 0 0; max-width: 40ch; color: #3F3A35; text-wrap: pretty; }
@media (min-width: 900px) {
  .lp-passos { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; margin-top: 3rem; }
  .lp-passo { padding: 3rem 0 0; }
  .lp-passo:not(:last-child)::after { left: 13px; top: 9px; bottom: auto; width: calc(100% + 2rem); height: 8px; }
}

/* --------------------------------------------------- por que a Grand Prix -- */
.lp-razoes {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem;
}
@media (min-width: 900px) { .lp-razoes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 3rem; } }
.lp-razoes li { border-top: 2px solid #fff; padding-top: 1rem; }
.lp-razoes strong {
  display: block; font-family: var(--sc-font-display); font-stretch: var(--largo); font-weight: 800;
  font-size: 1.25rem; line-height: 1.75rem; letter-spacing: -0.015em;
}
.lp-razoes p { margin: 0.5rem 0 0; color: #FFE6E3; text-wrap: pretty; }
.lp-razoes a { color: #fff; font-weight: 600; text-decoration-thickness: 2px; }
@media (hover: hover) and (pointer: fine) { .lp-razoes a:hover { color: var(--placa); text-decoration-color: transparent; } }

/* ------------------------------------------------- caminho em etapas --
   A linha de metrô da home, parada: cada etapa é uma estação numerada, com as etiquetas
   de quem faz a parte (.quem__tag do site.css). O título fica fixo ao lado no desktop. */
.lp-caminho { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
@media (min-width: 900px) {
  .lp-caminho { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
  .lp-caminho__painel { position: sticky; top: 3rem; }
}
.lp-caminho__painel .cta { margin-top: 2rem; }
.lp-etapas { list-style: none; margin: 0; padding: 0; counter-reset: etapa; }
.lp-etapa { position: relative; padding: 0 0 2rem 3.5rem; counter-increment: etapa; }
.lp-etapa:last-child { padding-bottom: 0; }
.lp-etapa::before {
  content: counter(etapa); position: absolute; z-index: 1; left: 0; top: 0;
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--placa); color: var(--tinta); box-shadow: inset 0 0 0 3px var(--tinta);
  font: 800 0.875rem/1 var(--sc-font-display); font-stretch: var(--largo);
}
.lp-etapa:not(:last-child)::after {
  content: ""; position: absolute; left: calc(1rem - 3px); top: 2rem; bottom: 0; width: 6px;
  border-radius: 3px; background: var(--tinta);
}
/* A estação terminal, em vermelho, como o "CNH na mão" da home. */
.lp-etapa--fim::before {
  background: var(--vermelho); color: #fff;
  box-shadow: inset 0 0 0 3px var(--vermelho), 0 0 0 3px var(--placa), 0 0 0 6px var(--vermelho);
}
.lp-etapa h3 {
  margin: 0; font-family: var(--sc-font-display); font-stretch: var(--largo); font-weight: 800;
  font-size: 1.25rem; line-height: 2rem; letter-spacing: -0.015em;
}
.lp-etapa--fim h3 { color: var(--vermelho-texto); }
.lp-etapa p { margin: 0.25rem 0 0; max-width: 52ch; color: #3F3A35; text-wrap: pretty; }
.lp-etapa .quem { margin-top: 0.75rem; }
.lp-etapa .quem a { color: inherit; }

/* ---------------------------------------------------------- verificador --
   Perguntas de toque, como o seletor de etapa da home, e o resultado numa placa.
   Sem JS o bloco fica escondido (hidden) e a tabela de requisitos responde sozinha. */
.lp-verif { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-top: 2.5rem; }
@media (min-width: 900px) {
  .lp-verif { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; align-items: start; margin-top: 3rem; }
  .lp-verif__resultado { position: sticky; top: 1.5rem; }
}
.lp-verif[hidden] { display: none; }
.lp-opcoes { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.lp-opcoes + .lp-opcoes { margin-top: 2rem; }
.lp-opcoes[hidden] { display: none; }
.lp-opcoes legend {
  padding: 0; margin-bottom: 0.75rem;
  font-family: var(--sc-font-display); font-stretch: var(--largo); font-weight: 800;
  font-size: 1.25rem; line-height: 1.75rem; letter-spacing: -0.015em;
}
.lp-opcoes__lista { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lp-opcoes label { position: relative; display: block; cursor: pointer; }
.lp-opcoes input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lp-opcoes span {
  display: flex; align-items: center; gap: 0.75rem; min-height: 48px; padding: 0 1rem;
  border-radius: var(--raio); background: #fff; color: var(--tinta);
  font-family: var(--sc-font-display); font-stretch: 106%; font-weight: 700; font-size: 1rem; line-height: 1.5rem;
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--tinta) 18%, transparent), var(--sc-e1);
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out);
}
.lp-opcoes span::before {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--tinta); background: #fff;
}
@media (hover: hover) and (pointer: fine) { .lp-opcoes label:hover span { background: #FBF9F5; } }
.lp-opcoes label:active span { transform: scale(0.98); }
.lp-opcoes input:checked + span { background: var(--tinta); color: var(--placa); box-shadow: var(--sc-e2); }
.lp-opcoes input:checked + span::before { background: var(--vermelho); box-shadow: inset 0 0 0 3px var(--placa); }
.lp-opcoes input:focus-visible + span { outline: 3px solid var(--vermelho-texto); outline-offset: 2px; }
/* Caixas de marcar (mais de uma resposta): quadrado em vez de círculo. */
.lp-opcoes input[type="checkbox"] + span::before { border-radius: 3px; }

/* Prévia da mensagem do WhatsApp montada pela página, como a da home. */
.lp-mensagem {
  display: grid; gap: 0.25rem; margin: 2rem 0 0; max-width: 680px; padding: 1rem;
  border-radius: var(--raio); background: #fff; box-shadow: var(--sc-e1), inset 0 0 0 1px var(--sc-hairline);
}
.lp-mensagem__rotulo { font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.06em; text-transform: uppercase; color: #6B645C; }
.lp-mensagem__texto { font-size: 1rem; line-height: 1.5rem; color: var(--tinta); text-wrap: pretty; }
.lp-montar[hidden] { display: none; }
.lp-montar .lp-opcoes { margin-top: 2rem; }
.lp-montar .cta { margin-top: 1.5rem; }

.lp-verif__resultado { display: grid; justify-items: start; gap: 0.75rem; padding: 1.5rem; }
.lp-verif__resultado .placa__tag { margin-bottom: 0.25rem; }
.lp-verif .placa p.lp-verif__titulo {
  margin: 0; font-family: var(--sc-font-display); font-stretch: var(--largo); font-weight: 800;
  font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; color: inherit; text-wrap: balance;
}
.lp-verif .placa p { margin: 0; text-wrap: pretty; }
.lp-verif__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.lp-verif__lista li { position: relative; padding-left: 1.5rem; line-height: 1.5rem; text-wrap: pretty; }
.lp-verif__lista li::before {
  content: ""; position: absolute; left: 0; top: 0.5rem; width: 9px; height: 9px; border-radius: 50%;
  box-shadow: inset 0 0 0 2.5px currentColor;
}
.lp-verif__resultado .cta { margin-top: 0.5rem; }
.lp-verif .placa p.lp-verif__nota { font-size: 0.875rem; line-height: 1.25rem; color: #57514A; }
.lp-verif .placa a:not(.cta) { color: inherit; font-weight: 600; text-decoration-thickness: 2px; }
/* Pode começar: a placa vira vermelha de regulamentação, como na home. */
/* .alerta usa a mesma placa vermelha: na renovação, marca a CNH vencida há mais de 30 dias. */
.lp-verif__resultado:is(.pode, .alerta) { background: var(--vermelho-chao); color: #fff; box-shadow: inset 0 0 0 5px var(--vermelho-chao), inset 0 0 0 8px #fff, var(--sc-e3); }
.lp-verif__resultado:is(.pode, .alerta) .placa__tag { background: #fff; color: var(--vermelho-texto); }
.lp-verif__resultado:is(.pode, .alerta) p { color: #FFE9E7; }
.lp-verif__resultado:is(.pode, .alerta) p.lp-verif__titulo { color: #fff; }
.lp-verif__resultado:is(.pode, .alerta) p.lp-verif__nota { color: #FFE1DE; }
.lp-verif__resultado:is(.pode, .alerta) .cta { background: var(--placa); color: var(--vermelho-texto); }
@media (hover: hover) and (pointer: fine) { .lp-verif__resultado:is(.pode, .alerta) .cta:hover { background: #fff; } }

/* Campo de data (renovação): o mesmo contorno das opções de toque. */
.lp-campo { display: grid; gap: 0.75rem; justify-items: start; }
.lp-campo label {
  font-family: var(--sc-font-display); font-stretch: var(--largo); font-weight: 800;
  font-size: 1.25rem; line-height: 1.75rem; letter-spacing: -0.015em;
}
.lp-campo input[type="date"] {
  min-height: 48px; padding: 0 1rem; border: 0; border-radius: var(--raio);
  background: #fff; color: var(--tinta); font: 600 1.125rem/1.75rem var(--sc-font-text);
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--tinta) 18%, transparent), var(--sc-e1);
}
.lp-campo input[type="date"]:focus-visible { outline: 3px solid var(--vermelho-texto); outline-offset: 2px; }
.lp-campo__ajuda { margin: 0; font-size: 0.875rem; line-height: 1.25rem; color: #57514A; }
.lp-campo + .lp-opcoes { margin-top: 2rem; }

.lp-tabela { width: 100%; margin-top: 3rem; border-collapse: collapse; font-size: 1rem; line-height: 1.5rem; }
.lp-tabela caption {
  caption-side: top; text-align: left; padding-bottom: 0.75rem;
  font-family: var(--sc-font-display); font-stretch: var(--largo); font-weight: 800;
  font-size: 1.25rem; line-height: 1.75rem; letter-spacing: -0.015em;
}
.lp-tabela th, .lp-tabela td { text-align: left; vertical-align: top; padding: 0.75rem 1rem 0.75rem 0; border-bottom: 1px solid var(--sc-hairline); }
.lp-tabela thead th {
  font: 700 0.75rem/1rem var(--sc-font-text); letter-spacing: 0.06em; text-transform: uppercase;
  color: #57514A; border-bottom: 2px solid var(--tinta);
}
.lp-tabela tbody th { font-family: var(--sc-font-display); font-stretch: var(--largo); font-weight: 800; white-space: nowrap; }
.lp-tabela td { color: #3F3A35; }
.lp-tabela__nota { margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.25rem; color: #57514A; max-width: 680px; }

/* ------------------------------------------------- redução de risco -- */
.lp-confira { display: grid; gap: 1.5rem; justify-items: start; padding: 2rem; }
@media (min-width: 900px) {
  .lp-confira { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem 3rem; padding: 3rem; }
}
.lp-confira .placa__titulo { font-size: 1.875rem; line-height: 2.25rem; margin-top: 0.75rem; }
.lp-confira p.lp-confira__texto { margin: 0.75rem 0 0; max-width: 52ch; font-size: 1.125rem; line-height: 1.75rem; }

/* --------------------------------------------------------------- fim -- */
.lp-fim { padding-top: 4rem; padding-bottom: calc(var(--barra-h) + 2rem); }
@media (min-width: 1024px) { .lp-fim { padding-top: 6rem; } }
.lp-fim .terminal__titulo { font-weight: 800; font-size: 3rem; line-height: 1; }
@media (min-width: 1024px) { .lp-fim .terminal__titulo { font-size: 3.75rem; } }
.lp-fim .terminal__proxima { font-size: 1.125rem; line-height: 1.75rem; }
.lp-fim .cta--claro { color: var(--vermelho-texto); }
.duvidas details p a { color: var(--placa); font-weight: 600; text-decoration-thickness: 2px; }
.lp-fim .unidades { margin-top: 4rem; }
.lp-fim .rodape { margin-top: 4rem; }

/* ------------------------------------------------------ entrada no scroll --
   Só com JS (.js no <html>): sobe 64px, desfoca e aparece em 900ms, na curva da skill. */
.js [data-revela] {
  opacity: 0; transform: translateY(4rem); filter: blur(12px);
  transition: opacity 900ms var(--sc-ease-drawer), transform 900ms var(--sc-ease-drawer), filter 900ms var(--sc-ease-drawer);
}
.js [data-revela].revelado { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-revela] { opacity: 1; transform: none; filter: none; transition: none; }
  .lp-palavra { opacity: 1; transition: none; }
}