/* =========================================================================
   WordCriação — landing pages
   Mesmo sistema (papel, tinta, Newsreader + Inter Tight); componentes próprios.
   ========================================================================= */

/* ---------- Cabeçalho mínimo ---------- */

.lp-head{
  border-bottom:1px solid var(--line);
  padding:22px 0;
  background:transparent;
}
.lp-head-in{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; }
.lp-head .mark{ font-size:21px; }
.lp-head .lp-kicker{
  font-family:var(--sans); font-size:11.5px; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase; color:var(--ink-light);
  text-align:right;
}

/* ---------- Abertura ---------- */

.lp-hero{ padding:clamp(60px,10vw,128px) 0 clamp(48px,7vw,84px); }
.lp-hero .h-page{ max-width:19ch; }
.lp-hero .lead{ max-width:56ch; margin-top:clamp(24px,3.2vw,38px); }
.lp-hero .hero-actions{ margin-top:clamp(28px,3.6vw,42px); }

/* Frase-tese isolada, do tamanho de um título de seção */
.tese{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(23px,2.7vw,34px); line-height:1.22; letter-spacing:-.012em;
  max-width:24ch; margin:0;
}

/* ---------- Trilha: as etapas reais do trabalho ---------- */

.trilha{
  list-style:none; margin:clamp(34px,4.4vw,52px) 0 0; padding:0;
  position:relative;
}
.trilha::before{
  content:""; position:absolute; left:12px; top:10px; bottom:10px;
  width:1px; background:var(--line-strong);
}
.trilha > li{
  position:relative;
  padding:0 0 clamp(30px,3.6vw,44px) clamp(48px,5vw,72px);
}
.trilha > li:last-child{ padding-bottom:0; }
.trilha > li::before{
  content:""; position:absolute; left:7px; top:9px;
  width:11px; height:11px; background:var(--ink);
}
.trilha .passo{
  font-family:var(--sans); font-size:11.5px; font-weight:500;
  letter-spacing:.17em; color:var(--ink-light); display:block; margin-bottom:8px;
}
.trilha h3{
  font-size:clamp(20px,2.2vw,26px); line-height:1.18; letter-spacing:-.012em;
  margin-bottom:10px;
}
.trilha p{ color:var(--ink-soft); font-size:17.5px; line-height:1.58; max-width:58ch; }

/* ---------- Antes / depois ---------- */

.par{
  border-top:1px solid var(--line);
  padding:clamp(28px,3.6vw,44px) 0;
}
.par-ctx{
  font-family:var(--sans); font-size:11.5px; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase; color:var(--ink-light);
  margin:0 0 20px; max-width:none;
}
.par-grid{ display:grid; gap:18px; }
@media (min-width:820px){ .par-grid{ grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); } }

.par-cel{ background:var(--white); padding:clamp(20px,2.4vw,30px); }
@media (max-width:819px){ .par-cel{ border:1px solid var(--line); } }
.par-cel .tag-ad{
  font-family:var(--sans); font-size:11px; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase; color:var(--ink-light);
  display:block; margin-bottom:14px;
}
.par-cel p{
  font-size:19px; line-height:1.5; margin:0; max-width:none;
}
.par-cel.antes p{ color:var(--ink-light); }
.par-cel.depois{ border-left:2px solid var(--ink); }
@media (max-width:819px){ .par-cel.depois{ border-left-width:2px; } }

.par-nota{
  font-family:var(--sans); font-size:15px; line-height:1.6; color:var(--ink-soft);
  margin:18px 0 0; max-width:66ch;
}
.par-nota b{ font-weight:600; color:var(--ink); }

/* ---------- Bloco de honestidade ---------- */

.honesto{
  border:1px solid var(--line-strong);
  background:transparent;
  padding:clamp(24px,3vw,36px);
  margin-top:clamp(30px,4vw,44px);
}
.honesto h3{
  font-size:clamp(20px,2.2vw,26px); letter-spacing:-.012em; margin-bottom:14px;
}
.honesto p{ color:var(--ink-soft); }
.honesto ul{ margin:0; padding-left:1.1em; color:var(--ink-soft); }
.honesto li{ margin-bottom:8px; }

/* ---------- Entregáveis ---------- */

.entrega{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); margin-top:clamp(30px,4vw,44px);
}
@media (min-width:640px){ .entrega{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .entrega{ grid-template-columns:repeat(3,1fr); } }
.entrega > div{ background:var(--white); padding:clamp(20px,2.4vw,28px); }
.entrega h4{
  font-family:var(--serif); font-weight:400; font-size:20px; line-height:1.2;
  letter-spacing:-.01em; margin:0 0 8px;
}
.entrega p{ font-family:var(--sans); font-size:14.5px; line-height:1.55; color:var(--ink-light); margin:0; max-width:none; }

/* ---------- Formulário curto da landing ---------- */

.lp-form{ background:var(--carbon); color:var(--carbon-ink); }
.lp-form .h-sec{ color:var(--carbon-ink); }
.lp-form p{ color:rgba(239,238,234,.82); }
.lp-form .label{ color:rgba(239,238,234,.6); }
.lp-form .sinal{ fill:var(--carbon-ink); opacity:.28; }
.lp-form-grid{ display:grid; gap:clamp(28px,3.6vw,44px); }
.lp-form .form-shell{ background:#181818; border-color:rgba(239,238,234,.18); }
.lp-form .field label{ color:rgba(239,238,234,.62); }
.lp-form .field input,
.lp-form .field select,
.lp-form .field textarea{
  background:#101010; color:var(--carbon-ink); border-color:rgba(239,238,234,.28);
}
.lp-form .field input:hover,
.lp-form .field select:hover,
.lp-form .field textarea:hover{ border-color:var(--carbon-ink); }
.lp-form .field input:focus,
.lp-form .field select:focus,
.lp-form .field textarea:focus{ background:#161616; }
.lp-form ::placeholder{ color:rgba(239,238,234,.45); }
.lp-form .field .hint{ color:rgba(239,238,234,.55); }
.lp-form .field .msg{ color:#F0A090; }
.lp-form .field.err input,
.lp-form .field.err select,
.lp-form .field.err textarea{ border-color:#F0A090; }
.lp-form .btn{ background:var(--carbon-ink); color:var(--carbon); border-color:var(--carbon-ink); }
.lp-form .btn:hover{ background:transparent; color:var(--carbon-ink); }
.lp-form .form-status{ border-left-color:var(--carbon-ink); background:#161616; color:var(--carbon-ink); }
.lp-form a:focus-visible,.lp-form button:focus-visible,
.lp-form input:focus-visible,.lp-form select:focus-visible,.lp-form textarea:focus-visible{
  outline-color:var(--carbon-ink);
}

/* ---------- Rodapé da landing ---------- */

.lp-foot{ border-top:1px solid var(--line); padding:clamp(34px,4vw,52px) 0; }
.lp-foot .sign{ margin:14px 0 0; }

/* ---------- Trilha de fundo (LP de conteúdo didático) ---------- */

.trilha-fundo{
  position:absolute; top:0; left:0; z-index:-1;
  pointer-events:none; overflow:visible;
}
.trilha-fundo path{ fill:none; stroke-linecap:square; stroke-linejoin:miter; }
.tf-fantasma{ stroke:rgba(18,18,18,.08); stroke-width:1; stroke-dasharray:2 7; }
.tf-tinta{ stroke:rgba(18,18,18,.34); stroke-width:1.25; transition:stroke-dashoffset .12s linear; }
.tf-parada{ fill:var(--paper); stroke:rgba(18,18,18,.34); stroke-width:1; transition:fill .6s var(--ease); }
.tf-parada.on{ fill:rgba(18,18,18,.55); }
.tf-destino.on{ fill:var(--ink); }
@media (prefers-reduced-motion: reduce){ .tf-tinta{ transition:none; } }
@media print{ .trilha-fundo{ display:none !important; } }

/* Títulos de abertura das LPs: frases que informam são mais longas que um lema */
.lp-hero .h-page{
  font-size:clamp(36px,5.6vw,68px);
  line-height:1.04;
  max-width:21ch;
}