/* ═══════════════════════════════════════════════════════════
   sections.css — seções abaixo do hero.
   Quem é o Lucas (papel creme) · Ecossistema · CTA.
   Padrão: .sec + .sec__wrap + cabeçalho. Mobile-first.
   ═══════════════════════════════════════════════════════════ */

/* ── Shell base ── */
.sec {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.2rem, 8vw, 6.5rem);
  padding-inline: var(--space-md);
  background-color: var(--color-bg-dark);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 46px 46px;
}
.sec--alt {
  background-color: #1a1716;
  background-image:
    radial-gradient(120% 80% at 100% 0%, rgba(255, 45, 110, 0.12), transparent 55%),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: auto, 46px 46px, 46px 46px;
}
.sec__wrap { position: relative; z-index: 1; max-width: var(--container-max); margin-inline: auto; }

/* ── Reveal on scroll: entra de baixo com um leve atraso em cascata.
   Estado inicial só vale quando o JS marca a página como capaz (js-reveal);
   sem JS, nada fica escondido. prefers-reduced-motion neutraliza no fim. ── */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
/* cascata entre os passos do funil (1 → 2 → 3) e entre arte/texto */
.js-reveal .eco__step:nth-child(2) { transition-delay: 0.08s; }
.js-reveal .eco__step:nth-child(3) { transition-delay: 0.16s; }
.js-reveal .kit__text { transition-delay: 0.1s; }

/* estrelinha decorativa (reaproveita a forma do hub) */
.sec__star {
  position: absolute;
  color: var(--color-pink);
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}
.sec__star svg { display: block; width: 100%; height: 100%; }


/* cabeçalho de seção */
.sec__eyebrow {
  display: inline-block;
  margin-bottom: 0.3rem;
  font-family: var(--font-hand);
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-pink);
  transform: rotate(-2deg);
}
.sec__title {
  margin: 0;
  font-family: var(--font-comic);
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  line-height: 1.1;          /* respiro p/ títulos-gancho de 2-3 linhas (DK Lemon cola demais em 1.02) */
  text-wrap: balance;        /* quebra equilibrada, evita viúva solta no fim */
  color: var(--color-ink);
}
.sec__title::after {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  margin-top: 0.7rem;
  background: var(--color-pink);
  border-radius: 3px;
}
.sec__lead {
  margin: var(--space-sm) 0 0;
  max-width: 60ch;          /* linha confortável ~50-75 caracteres */
  font-size: clamp(1rem, 1.1vw + 0.7rem, 1.12rem);
  line-height: 1.55;
  color: var(--color-ink);  /* lead = leitura principal: mais contraste que o dim */
}

/* bloco-cabeçalho da seção: no funil a leitura é centrada num eixo único
   (título → lead → trust), com o tracinho rosa centralizado como âncora. */
.sec__head { max-width: 56ch; }
.sec--eco .sec__head { text-align: center; margin-inline: auto; }
.sec--eco .sec__head .sec__lead { margin-inline: auto; }
.sec--eco .sec__title::after { margin-inline: auto; }

/* ── Variante PAPEL (creme) — quebra o tudo-escuro ── */
.sec--paper {
  border-top: 6px solid var(--color-pink);
  background-color: var(--color-bg-paper);
  background-image:
    radial-gradient(110% 90% at 0% 0%, rgba(255, 45, 110, 0.1), transparent 55%),
    linear-gradient(rgba(0, 0, 0, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px);
  background-size: auto, 46px 46px, 46px 46px;
}
.sec--paper .sec__title { color: #161413; }
.sec--paper .sec__lead { color: rgba(22, 20, 19, 0.7); }

/* ═══ Quem é o Lucas ═══ */
.lucas {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) 1fr;
  gap: clamp(1.5rem, 4vw, 3.2rem);
  align-items: center;
}
.lucas__photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 3px solid #161413;
  box-shadow: 10px 10px 0 var(--color-pink);
  transform: rotate(-1.5deg);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.lucas__photo:hover,
.lucas__photo:focus-within {
  transform: rotate(0deg) translateY(-5px);
  box-shadow: 14px 16px 0 var(--color-pink);
}
.lucas__photo img { display: block; width: 100%; height: auto; }
/* redes que aparecem na foto */
.lucas__social {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  padding: 1.6rem 0.7rem 0.8rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.lucas__photo:hover .lucas__social,
.lucas__photo:focus-within .lucas__social { opacity: 1; transform: translateY(0); }
.lucas__social a {
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--radius-pill);
}
.lucas__social a:hover { background: var(--color-pink); border-color: var(--color-pink); opacity: 1; }
.lucas__p {
  margin: 0.8rem 0 0;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(22, 20, 19, 0.66);
}
.lucas__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.4rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.lucas__stats li { display: flex; flex-direction: column; }
.lucas__stats b {
  font-family: var(--font-comic);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1;
  color: var(--color-pink-deep);
}
.lucas__stats span {
  margin-top: 0.2rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(22, 20, 19, 0.55);
}

/* ═══ O ecossistema (funil) — level-select de nós conectados ═══
   Princípio (skill tree estilo Tomb Raider / ARPG): a pessoa "caminha"
   de nó em nó; cada parada é um nó na trilha; o nó da próxima ação
   acende rosa (sinal-guia), os outros recuam. */
.sec--eco {
  background-color: #14100f;
  background-image:
    radial-gradient(130% 95% at 50% 122%, rgba(255, 45, 110, 0.24), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: auto, 46px 46px, 46px 46px;
}

/* linha de confiança = prova social: pequena, mas com os números em destaque */
.eco__trust {
  margin: var(--space-md) 0 0;
  font-size: 0.95rem;
  color: var(--color-ink-dim);
}
.eco__trust b {
  font-weight: 700;
  color: var(--color-ink);
}

.eco {
  /* --node: tamanho do disco. --pad-t: respiro do topo do card até o nó.
     O conector é desenhado na altura (--pad-t + metade do nó), então
     acompanha o nó sozinho — sem número mágico frágil. */
  --node: 80px;
  --pad-t: clamp(1.4rem, 3vw, 2rem);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 1.8rem);
  margin: clamp(2.4rem, 6vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
}

.eco__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.45rem;
  padding: var(--pad-t) clamp(1.1rem, 2.6vw, 1.7rem) clamp(1.4rem, 3vw, 1.9rem);
  background: #0e0d0c;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.eco__step:hover,
.eco__step:focus-within {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: var(--shadow-md);
}
/* a TRILHA: cada nó emite o caminho até o próximo (some no último).
   Posicionado no centro vertical do nó; cruza o gap entre os cards. */
.eco__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--pad-t) + var(--node) / 2);
  left: calc(50% + var(--node) / 2 - 2px);
  width: calc(100% - var(--node) + clamp(1rem, 2.4vw, 1.8rem));   /* até o nó vizinho, cruzando o gap */
  height: 4px;
  transform: translateY(-50%);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  z-index: 0;
}
/* o primeiro trecho (saindo do passo grátis) é rosa = a próxima ação */
.eco__step--now:not(:last-child)::after { background: var(--color-pink); }

/* índice grande da parada — legível, como número de fase */
.eco__num {
  position: absolute;
  top: 0.7rem;
  right: 1rem;
  font-family: var(--font-comic);
  font-size: 1.5rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.14);
  letter-spacing: -0.02em;
}

/* o NÓ: disco onde a trilha "para". O recorte interno (inset) cria o anel. */
.eco__node {
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  border-radius: 50%;
  background: #14100f;
  border: 3px solid var(--color-line);
  box-shadow: inset 0 0 0 6px #0e0d0c;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.eco__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 1.7rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}
.eco__badge--mark {
  font-family: "Arial Black", Arial, sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  color: #fff;
  background: var(--color-pink);
}

/* o passo "agora" (grátis) = sinal-guia rosa. O resto recua. */
.eco__step--now {
  border-color: rgba(255, 45, 110, 0.45);
}
.eco__step--now .eco__node {
  border-color: var(--color-pink);
  box-shadow: inset 0 0 0 6px #0e0d0c, 0 0 22px var(--color-pink-glow);
}

/* corpo textual do passo: coluna que cresce, pra o link "ancorar" embaixo
   e os 3 cards manterem a base alinhada mesmo com textos de tamanhos diferentes */
.eco__body {
  display: flex;
  flex-direction: column;
  align-items: inherit;          /* segue o alinhamento do step (center no desktop) */
  gap: 0.4rem;
  flex: 1 1 auto;
  margin-top: 0.9rem;
}
.eco__verb {
  font-family: var(--font-hand);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-pink);
}
.eco__name {
  margin: 0.1rem 0 0;
  font-family: var(--font-comic);
  font-size: clamp(1.2rem, 2.4vw, 1.4rem);
  line-height: 1.05;
  color: var(--color-ink);
}
.eco__step p {
  margin: 0;
  max-width: 30ch;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--color-ink-dim);
}
.eco__link {
  margin-top: auto;
  padding-top: 0.7rem;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  color: var(--color-pink);
}
.eco__link span { transition: transform 0.16s ease; display: inline-block; }
.eco__step:hover .eco__link span,
.eco__link:focus-visible span { transform: translateX(4px); }
.eco__link:hover { opacity: 1; }

/* ═══ Destaque (spotlight) Kit / Ebook — imagem + texto alternados ═══
   Princípio (alternating rhythm + NN/g): a imagem é informativa (mostra
   o produto), então alternar lados cria ritmo SEM custar a leitura,
   desde que o texto fique num eixo claro. A arte "fura" o grid com leve
   inclinação (assinatura de card inclinado da marca) e glow rosa atrás. */
.kit {
  display: grid;
  grid-template-columns: minmax(0, 360px) 1fr;
  gap: clamp(1.8rem, 5vw, 4rem);
  align-items: center;
}
.kit__art {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: visible;             /* deixa o índice e o glow saírem da moldura */
  transform: rotate(-2deg);
  transition: transform 0.25s ease;
}
.kit--right .kit__art { transform: rotate(2deg); }
.kit__art:hover { transform: rotate(0deg) translateY(-4px); }
/* glow rosa atrás da arte = profundidade, sem pintar tudo de rosa */
.kit__art::before {
  content: "";
  position: absolute;
  inset: -8% -6% -14% -6%;
  border-radius: var(--radius-xl);
  background: radial-gradient(70% 70% at 50% 60%, var(--color-pink-glow), transparent 72%);
  filter: blur(6px);
  opacity: 0.7;
  z-index: -1;
}
.kit__art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-line);
  box-shadow: var(--shadow-lg);
}
/* índice grande "01 / 02" = âncora de leitura e ritmo (estilo level-select) */
.kit__index {
  position: absolute;
  top: -0.55em;
  left: -0.35em;
  z-index: 2;
  font-family: var(--font-comic);
  font-size: clamp(3rem, 9vw, 5rem);
  line-height: 0.8;
  color: var(--color-pink);
  -webkit-text-stroke: 2px var(--color-bg-dark);
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  transform: rotate(-4deg);
  pointer-events: none;
}
.kit--right .kit__index { left: auto; right: -0.35em; transform: rotate(4deg); }
.kit__tools {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.kit__tools li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.96rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}
.kit__tools li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--color-pink);
  font-weight: 700;
}
.kit__tools b { color: #fff; }
.kit__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: var(--space-md);
  min-height: 48px;              /* alvo de toque confortável (>=44px) */
  padding: 0.85rem 1.8rem;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-pink-deep);
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 28px rgba(255, 45, 110, 0.32);
  transition: transform 0.14s ease, filter 0.14s ease, box-shadow 0.14s ease;
}
.kit__cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 16px 34px rgba(255, 45, 110, 0.42);
  opacity: 1;
}
.kit__cta-arrow { transition: transform 0.16s ease; }
.kit__cta:hover .kit__cta-arrow,
.kit__cta:focus-visible .kit__cta-arrow { transform: translateX(4px); }

@media (max-width: 760px) {
  .kit { grid-template-columns: 1fr; gap: clamp(1.4rem, 8vw, 2.2rem); }
  .kit__art,
  .kit--right .kit__art { max-width: 320px; margin-inline: auto; transform: rotate(-2deg); }
  /* no mobile o índice volta pra dentro do fluxo visual (não estoura a lateral) */
  .kit__index,
  .kit--right .kit__index { left: 0.1rem; right: auto; top: -0.4em; font-size: clamp(2.6rem, 16vw, 3.6rem); }
}
/* destaque do ebook: fundo espelhado (glow no lado esquerdo) + arte à direita */
.sec--ebook {
  background-color: #1a1716;
  background-image:
    radial-gradient(120% 80% at 0% 0%, rgba(255, 45, 110, 0.12), transparent 55%),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: auto, 46px 46px, 46px 46px;
}
@media (min-width: 761px) {
  .kit--right { grid-template-columns: 1fr minmax(0, 340px); }
  .kit--right .kit__text { grid-column: 1; grid-row: 1; }
  .kit--right .kit__art { grid-column: 2; grid-row: 1; }
}
/* destaque dos Cursos (tier que aprofunda): arte à esquerda, com um pouco mais
   de presença rosa porque é o passo de maior compromisso (sinal-guia, sem exagero). */
.sec--cursos {
  border-top: 1px solid rgba(255, 45, 110, 0.28);   /* "degrau" do funil: marca que subiu pro tier que aprofunda (distingue do Ebook) */
  background-color: var(--color-bg-dark);
  background-image:
    radial-gradient(120% 85% at 0% 0%, rgba(255, 45, 110, 0.16), transparent 56%),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: auto, 46px 46px, 46px 46px;
}

/* ═══ "Por que esse jeito" (filosofia) — manifesto emocional na página de cursos.
   Fundo escuro com brilho rosa no topo: bloco dramático que contrasta com a
   prova social (creme) logo abaixo. Coluna estreita pra leitura confortável. ═══ */
.sec--why {
  background:
    radial-gradient(125% 120% at 50% 0%, rgba(255, 45, 110, 0.2), transparent 60%),
    var(--color-bg-dark);
}
.why { max-width: 64ch; margin-inline: auto; }
.sec--why .sec__eyebrow { margin-bottom: 0.55rem; }   /* respiro eyebrow->título na coluna estreita */
.why__body { margin-top: var(--space-md); }
.why__body p {
  margin: 0 0 clamp(1.3rem, 3vw, 1.7rem);   /* respiro maior entre os blocos de pensamento */
  font-size: clamp(1.02rem, 1.1vw + 0.78rem, 1.18rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.82);
}
/* a primeira frase (a dor) é a entrada do bloco: branco cheio + guia rosa à esquerda */
.why__body p:first-child {
  color: var(--color-ink);
  padding-left: 1.1rem;
  border-left: 3px solid var(--color-pink);
}
.why__body p:last-child { margin-bottom: 0; }
.why__body strong { color: var(--color-ink); font-weight: 700; }   /* âncora de alívio na leitura */
/* frases-âncora (pull-quotes): batidas de emoção que quebram o paredão de texto.
   Fonte comic + escala maior = a "voz alta" do bloco; o corpo Poppins recua. */
.why__body p.why__pull {
  margin: clamp(1.8rem, 4.5vw, 2.8rem) 0;
  font-family: var(--font-comic);
  font-size: clamp(1.5rem, 3.6vw, 2.25rem);
  line-height: 1.14;
  color: var(--color-ink);
  text-wrap: balance;
}
.why__body p.why__pull--hi {              /* o pico (o alívio): um tom acima e branco cheio */
  font-size: clamp(1.7rem, 4.6vw, 2.7rem);
  color: #fff;
}
/* cascata leve: o corpo entra logo depois do título */
.js-reveal .why__body { transition-delay: 0.08s; }

/* ═══ CTA final ═══ */
.sec--cta {
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(255, 45, 110, 0.26), transparent 62%),
    var(--color-bg-dark);
  text-align: center;
}
.cta { position: relative; z-index: 1; max-width: 640px; margin-inline: auto; }
.cta__title {
  margin: 0;
  font-family: var(--font-comic);
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  line-height: 1.02;
  color: var(--color-ink);
}
.cta__lead {
  margin: 0.9rem auto 0;
  max-width: 46ch;
  font-size: 1.06rem;
  color: rgba(255, 255, 255, 0.8);
}
.cta__btn {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 1rem 2.4rem;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-pink-deep);
  border-radius: var(--radius-pill);
  box-shadow: 0 14px 32px rgba(255, 45, 110, 0.38);
  transition: transform 0.14s ease, filter 0.14s ease;
}
.cta__btn:hover { transform: translateY(-2px); filter: brightness(1.08); opacity: 1; }
.cta__sub { margin: 0.85rem 0 0; font-size: 0.82rem; color: var(--color-ink-dim); }

/* ═══ Mobile ═══ */
@media (max-width: 720px) {
  .lucas { grid-template-columns: 1fr; }
  .lucas__photo { max-width: 300px; margin-inline: auto; transform: rotate(-1.5deg); }
  .lucas__social { opacity: 1; transform: none; }   /* no toque, redes sempre visíveis */

  /* funil vira linha do tempo VERTICAL: nó à esquerda, trilha descendo,
     texto à direita. Lê de cima pra baixo como um mapa de fase. */
  .eco {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: clamp(1.8rem, 7vw, 2.6rem);
  }
  .eco__step::after { display: none; }         /* desliga o conector horizontal */
  .eco__step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: var(--space-md);
    padding: 0 0 clamp(1.6rem, 7vw, 2.4rem) 0;
    background: none;
    border: none;
    border-radius: 0;
  }
  .eco__step:hover,
  .eco__step:focus-within { transform: none; box-shadow: none; }
  /* trilha vertical: desce do nó até o próximo (some no último) */
  .eco__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 28px;                                /* centro do nó (56px de largura) */
    top: 56px;
    bottom: 0;
    width: 3px;
    background: rgba(255, 255, 255, 0.16);
    z-index: 0;
  }
  .eco__step--now:not(:last-child)::before { background: var(--color-pink); }
  .eco__step:last-child { padding-bottom: 0; }
  .eco__node {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    box-shadow: inset 0 0 0 4px #0e0d0c;
    z-index: 1;
  }
  .eco__step--now .eco__node { box-shadow: inset 0 0 0 4px #0e0d0c, 0 0 18px var(--color-pink-glow); }
  .eco__badge { width: 38px; height: 38px; font-size: 1.25rem; }
  .eco__badge--mark { font-size: 1.1rem; }
  .eco__body { min-width: 0; align-items: flex-start; margin-top: 0; }  /* deixa o texto quebrar, sem estourar */
  .eco__num { display: none; }                 /* o nó + trilha vertical já dão a ordem */
  .eco__step p { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cta__btn,
  .kit__cta,
  .kit__cta-arrow,
  .kit__art,
  .eco__step,
  .eco__link span,
  .lucas__photo,
  [data-reveal] { transition: none !important; }
  /* com movimento reduzido, nada fica escondido esperando animação */
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}