/* =========================================================
   Leitura dos pés × astrologia — página do app
   Depende de style.css (tokens, .container, .btn, .eyebrow, .h1..h6,
   .card-motivo, .perg, .rodape). Aqui só o que é desta página.
   ========================================================= */

:root{
  --noite:#0b212b;
  --noite-2:#123f4f;
  --ouro:#d9b877;
  --campo:#fbfcfc;
}

/* o hero é escuro, então o header de vidro do site funciona igual;
   só o burger some, porque aqui a nav cabe inteira ou é dispensável */
.lp .header .burger{ display:none }

/* =========================================================
   HERO NOTURNO
   ========================================================= */
.lp-hero{
  position:relative; overflow:hidden; color:#fff;
  padding:200px var(--gutter) 96px;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(78,179,202,.30) 0%, rgba(78,179,202,0) 55%),
    radial-gradient(90% 70% at 12% 92%, rgba(217,184,119,.16) 0%, rgba(217,184,119,0) 60%),
    linear-gradient(168deg, var(--noite) 0%, #10333f 52%, var(--noite-2) 100%);
}
.lp-hero .container{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:40px; align-items:center }

.lp-hero__txt{ display:flex; flex-direction:column; align-items:flex-start; gap:24px; max-width:620px }
.lp-hero .h1{ color:#fff; font-size:60px; line-height:64px; letter-spacing:-1.8px }
.lp-hero .h1 em{ font-style:normal; color:var(--ouro) }
.lp-hero__lead{ margin:0; color:rgba(255,255,255,.82); font-size:18px; line-height:29px; max-width:520px }
.lp-hero__acoes{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:4px }
.lp-hero__nota{ color:rgba(255,255,255,.62); font-size:14px; line-height:22px }

.lp-selos{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px }
.lp-selo{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px;
  border-radius:90px; border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.07); backdrop-filter:blur(18px);
  color:rgba(255,255,255,.88); font-size:14px; line-height:20px;
}
.lp-selo svg{ width:15px; height:15px; flex:none; color:var(--ouro) }

/* retrato: halo circular + constelação decorativa */
.lp-hero__foto{ position:relative; justify-self:center; width:420px; max-width:100% }
.lp-hero__halo{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:390px; height:390px; border-radius:999px;
  background:radial-gradient(circle, rgba(78,179,202,.42) 0%, rgba(78,179,202,0) 68%);
  border:1px solid rgba(255,255,255,.14);
}
.lp-hero__foto img{
  position:relative; width:100%; height:auto;
  filter:drop-shadow(0 24px 48px rgba(4,18,24,.5));
  /* o recorte termina na cintura: sem isso o corte reto fica aparente sobre o céu */
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 82%,transparent 100%);
}

/* =========================================================
   COMO FUNCIONA (faixa clara logo abaixo do hero)
   ========================================================= */
.lp-sec{ padding:96px var(--gutter) }
.lp-sec--alt{ background:var(--alt) }
.lp-head{ display:flex; flex-direction:column; gap:14px; max-width:620px; margin-bottom:48px }
.lp-head--centro{ align-items:center; text-align:center; margin-inline:auto }
.lp-head .lead{ font-size:17px; line-height:28px }

.lp-passos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; counter-reset:p }
.lp-passo-card{
  position:relative; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); padding:28px 24px 24px; display:flex; flex-direction:column; gap:10px;
}
.lp-sec--alt .lp-passo-card{ border-color:transparent }
.lp-passo-card::before{
  counter-increment:p; content:counter(p);
  width:36px; height:36px; border-radius:999px; margin-bottom:8px;
  display:grid; place-items:center; background:var(--marca); color:#fff;
  font-family:var(--display); font-weight:500; font-size:17px;
}
.lp-passo-card h3{ margin:0 }
.lp-passo-card p{ margin:0 }

/* =========================================================
   MAPA DO PÉ
   ========================================================= */
.lp-mapa{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:48px; align-items:center }
.lp-regioes{ display:flex; flex-direction:column; gap:12px }
.lp-regiao{
  display:grid; grid-template-columns:14px minmax(0,1fr); gap:18px; align-items:start;
  background:var(--white); border-radius:var(--r); padding:24px;
}
.lp-sec--alt .lp-regiao{ background:var(--white) }
.lp-regiao__cor{ width:14px; height:14px; border-radius:999px; margin-top:7px }
.lp-regiao h3{ margin:0 0 6px }
.lp-regiao p{ margin:0 }
.lp-regiao span{ display:block; margin-top:10px; font-size:14px; line-height:22px; color:var(--marca) }
.lp-pe{ justify-self:center; width:260px; height:auto }

.lp-lados{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px }
.lp-lado{ background:var(--white); border-radius:var(--r); padding:24px }
.lp-lado h4{ margin:0 0 8px }
.lp-lado p{ margin:0 }
.lp-lado__tag{
  display:inline-block; margin-bottom:14px; padding:4px 12px; border-radius:90px;
  background:var(--alt); color:var(--ink); font-size:13px; line-height:20px;
}
.lp-sec--alt .lp-lado__tag{ background:#eef7f9 }

/* =========================================================
   O QUE EU OBSERVO (cartões numerados)
   ========================================================= */
.lp-encontro{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.lp-encontro--4{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.lp-enc{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:28px 24px; display:flex; flex-direction:column; gap:12px;
}
.lp-enc__ico{
  width:44px; height:44px; border-radius:999px; display:grid; place-items:center;
  background:var(--alt); color:var(--marca); font-family:var(--display); font-weight:500; font-size:19px; margin-bottom:6px;
}
.lp-enc h3{ margin:0 }
.lp-enc p{ margin:0 }
.lp-enc blockquote{
  margin:6px 0 0; padding-left:16px; border-left:2px solid var(--marca);
  font-family:var(--display); font-size:16px; line-height:26px; color:var(--ink);
}

/* =========================================================
   O QUE VOCÊ RECEBE
   ========================================================= */
.lp-recebe{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,460px); gap:48px; align-items:center }
.lp-recebe__txt .h2{ margin:14px 0 20px }
.lp-recebe__lista{ display:flex; flex-direction:column; gap:12px; margin-top:28px }
.lp-recebe__lista li{ display:flex; gap:12px; align-items:flex-start }
.lp-recebe__lista svg{ width:20px; height:20px; flex:none; margin-top:3px; color:var(--marca) }

.lp-amostra{
  background:var(--white); border-radius:var(--r); padding:32px;
  border-left:3px solid var(--marca);
}
.lp-amostra figcaption{ font-size:14px; line-height:22px; color:#7d868b; margin-bottom:16px }
.lp-amostra blockquote{
  margin:0; font-family:var(--display); font-weight:400; font-size:21px; line-height:34px; color:var(--ink);
}

/* =========================================================
   FORMULÁRIO (o app)
   ========================================================= */
.lp-app{ background:var(--noite); padding:96px var(--gutter); color:#fff }
.lp-app .lp-head{ color:#fff }
.lp-app .lp-head .h2{ color:#fff }
.lp-app .lp-head .lead{ color:rgba(255,255,255,.78) }
.lp-app .eyebrow{ color:rgba(255,255,255,.75) }
.lp-app .eyebrow::before{ background:var(--ouro) }

.lp-card{
  background:var(--white); color:var(--body); border-radius:var(--r);
  max-width:760px; margin-inline:auto; padding:40px;
}

.lp-trilha{ display:flex; gap:8px; margin-bottom:32px }
.lp-trilha li{ flex:1; display:flex; flex-direction:column; gap:8px; font-size:13px; line-height:18px; color:#9aa3a8 }
.lp-trilha li::before{ content:''; height:4px; border-radius:99px; background:var(--line) }
.lp-trilha li[data-feito]::before{ background:var(--marca) }
.lp-trilha li[aria-current]{ color:var(--ink) }
.lp-trilha li[aria-current]::before{ background:var(--marca) }

.lp-etapa{ display:flex; flex-direction:column; gap:24px; border:0; margin:0; padding:0; min-width:0 }
.lp-etapa[hidden]{ display:none }
.lp-etapa__cab h3{ margin:0 0 8px }
.lp-etapa__cab p{ margin:0 }

.lp-linha{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.lp-campo{ display:flex; flex-direction:column; gap:8px }
.lp-campo--full{ grid-column:1 / -1 }
.lp-campo label{ font-size:15px; line-height:22px; color:var(--ink) }
.lp-campo label small{ color:#8f979c }
.lp-campo input[type=text],
.lp-campo input[type=tel],
.lp-campo input[type=email],
.lp-campo input[type=date],
.lp-campo input[type=time],
.lp-campo select,
.lp-campo textarea{
  width:100%; padding:13px 16px; border:1px solid var(--line); border-radius:12px;
  background:var(--campo); color:var(--ink); font:inherit; transition:border-color .2s ease, box-shadow .2s ease;
}
.lp-campo textarea{ resize:vertical; min-height:96px }
.lp-campo input:focus, .lp-campo select:focus, .lp-campo textarea:focus{
  outline:none; border-color:var(--marca); box-shadow:0 0 0 3px rgba(78,179,202,.18);
}
.lp-campo input[aria-invalid=true], .lp-campo select[aria-invalid=true]{ border-color:#c9564b }
.lp-erro{ color:#c9564b; font-size:14px; line-height:20px }
.lp-erro:empty{ display:none }
.lp-dica{ font-size:14px; line-height:21px; color:#7d868b }

.lp-check{ display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:23px }
.lp-check input{ width:20px; height:20px; margin-top:2px; flex:none; accent-color:var(--marca) }

/* escolhas em pílula (autorrelato) */
.lp-opcoes{ display:flex; gap:8px; flex-wrap:wrap }
.lp-opcao{ position:relative }
.lp-opcao input{ position:absolute; opacity:0; width:0; height:0 }
.lp-opcao span{
  display:inline-block; padding:9px 18px; border-radius:90px; cursor:pointer;
  border:1px solid var(--line); background:var(--campo); font-size:15px; line-height:22px;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.lp-opcao input:checked + span{ background:var(--alt); border-color:var(--marca); color:var(--ink) }
.lp-opcao input:focus-visible + span{ box-shadow:0 0 0 3px rgba(78,179,202,.25) }

/* fotos */
.lp-fotos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.lp-foto{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer;
  border:1.5px dashed #cfd6d9; border-radius:14px; padding:20px 14px; text-align:center;
  background:var(--campo); transition:border-color .2s ease, background .2s ease; min-height:168px;
  justify-content:center;
}
.lp-foto:hover{ border-color:var(--marca); background:#f4fbfc }
.lp-foto input{ position:absolute; opacity:0; width:0; height:0 }
.lp-foto:focus-within{ border-color:var(--marca); box-shadow:0 0 0 3px rgba(78,179,202,.25) }
.lp-foto__vazio{ display:flex; flex-direction:column; align-items:center; gap:8px }
.lp-foto__ico{ width:38px; height:38px; border-radius:999px; display:grid; place-items:center; background:var(--alt); color:var(--marca) }
.lp-foto__ico svg{ width:19px; height:19px }
.lp-foto strong{ font-family:var(--display); font-weight:500; font-size:16px; color:var(--ink) }
.lp-foto small{ font-size:13px; line-height:19px; color:#7d868b }
.lp-foto[data-cheia]{ border-style:solid; border-color:var(--marca); padding:0; overflow:hidden }
.lp-foto[data-cheia] .lp-foto__vazio{ display:none }
.lp-foto__prev{ display:none; width:100%; height:168px; object-fit:cover }
.lp-foto[data-cheia] .lp-foto__prev{ display:block }
/* etiquetas que só aparecem depois que a foto entra */
.lp-foto__nome,
.lp-foto__trocar{
  display:none; position:absolute; padding:4px 11px; border-radius:90px;
  background:rgba(11,33,43,.82); color:#fff; font-size:13px; line-height:19px;
}
.lp-foto__nome{ left:8px; top:8px }
.lp-foto__trocar{ right:8px; bottom:8px }
.lp-foto[data-cheia] .lp-foto__nome,
.lp-foto[data-cheia] .lp-foto__trocar{ display:block }

.lp-guia{ background:var(--alt); border-radius:14px; padding:20px 22px }
.lp-guia h4{ margin:0 0 10px; font-family:var(--display); font-weight:500; font-size:16px; color:var(--ink) }
.lp-guia ul{ display:flex; flex-direction:column; gap:7px }
.lp-guia li{ display:flex; gap:9px; font-size:14px; line-height:22px }
.lp-guia li::before{ content:''; width:5px; height:5px; border-radius:999px; background:var(--marca); flex:none; margin-top:8px }

/* consentimento */
.lp-consent{ border:1px solid var(--line); border-radius:14px; padding:24px }
.lp-consent h4{ margin:0 0 12px; font-family:var(--display); font-weight:500; font-size:17px; color:var(--ink) }
.lp-consent dl{ margin:0 0 18px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 16px; font-size:14px; line-height:22px }
.lp-consent dt{ color:var(--ink) }
.lp-consent dd{ margin:0 }
.lp-consent details{ margin-top:14px; font-size:14px; line-height:22px }
.lp-consent summary{ cursor:pointer; color:var(--marca) }
.lp-consent details p{ margin:10px 0 0 }

/* navegação do formulário */
.lp-nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:8px; flex-wrap:wrap }
.lp-voltar{ color:var(--body); text-decoration:underline; text-underline-offset:3px }
.lp-voltar:hover{ color:var(--ink) }
.lp-nav .btn[disabled]{ opacity:.6; cursor:progress }

/* fim do fluxo */
.lp-fim[hidden]{ display:none }
.lp-fim{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px; padding:16px 0 }
.lp-fim__ico{ width:64px; height:64px; border-radius:999px; display:grid; place-items:center; background:var(--alt); color:var(--marca) }
.lp-fim__ico svg{ width:30px; height:30px }
.lp-fim p{ margin:0; max-width:460px }

/* =========================================================
   LIMITES
   ========================================================= */
.lp-limites{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.lp-limite{ background:var(--white); border-radius:var(--r); padding:26px 24px; border:1px solid var(--line) }
.lp-limite h3{ margin:0 0 8px; font-family:var(--display); font-weight:500; font-size:19px; line-height:27px; color:var(--ink) }
.lp-limite p{ margin:0 }

/* =========================================================
   CONVITE FINAL
   ========================================================= */
.lp-convite{ display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:48px; align-items:center }
.lp-convite .h2{ margin-bottom:20px }
.lp-convite .lead{ margin-bottom:32px; max-width:520px }
.lp-convite__foto{ border-radius:var(--r); overflow:hidden; height:380px }
.lp-convite__foto img{ width:100%; height:100%; object-fit:cover }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1199px){
  .lp-hero{ padding:170px var(--gutter) 72px }
  .lp-hero .container{ grid-template-columns:minmax(0,1fr) 340px; gap:24px }
  .lp-hero .h1{ font-size:48px; line-height:54px; letter-spacing:-1.2px }
  .lp-hero__foto{ width:340px }
  .lp-hero__halo{ width:320px; height:320px }
  .lp-mapa{ grid-template-columns:minmax(0,1fr) 240px; gap:32px }
  .lp-recebe{ gap:32px }
  .lp-convite{ grid-template-columns:minmax(0,1fr) 340px; gap:32px }
}
@media (max-width:900px){
  .lp-passos{ grid-template-columns:1fr }
  .lp-encontro, .lp-encontro--4{ grid-template-columns:1fr }
  .lp-recebe{ grid-template-columns:1fr }
  .lp-mapa{ grid-template-columns:1fr }
  .lp-pe{ order:-1 }
  .lp-limites{ grid-template-columns:1fr }
  .lp-convite{ grid-template-columns:1fr }
  .lp-convite__foto{ height:280px }
}
@media (max-width:767px){
  /* Esta LP nao tem a faixa do topo do site, entao os 76px de recuo do
     cabecalho viram so um vao: no celular a logo descia ate 136px e caia
     em cima do selo do hero. Encosto o header no topo, reduzo a logo e
     recalculo o respiro do hero a partir dai. */
  .header{ top:16px }
  .brand img{ height:52px }
  .lp-hero{ padding:116px var(--gutter) 48px }
  .lp-hero .container{ grid-template-columns:1fr }
  .lp-hero .h1{ font-size:36px; line-height:42px; letter-spacing:-.8px }
  .lp-hero__lead{ font-size:16px; line-height:26px }
  .lp-hero__foto{ width:100%; max-width:280px; justify-self:center; margin-top:8px }
  .lp-hero__halo{ width:250px; height:250px }
    .lp-hero__acoes{ width:100%; flex-direction:column; align-items:stretch }
  .lp-hero__acoes .btn{ justify-content:space-between }
  .lp-sec{ padding:36px var(--gutter) }
  .lp-app{ padding:36px var(--gutter) }
  .lp-head{ margin-bottom:28px }
  .lp-card{ padding:24px 20px; border-radius:16px }
  .lp-linha{ grid-template-columns:1fr }
  .lp-fotos{ grid-template-columns:1fr }
  .lp-foto{ min-height:132px }
  .lp-foto__prev{ height:180px }
  .lp-amostra{ padding:24px }
  .lp-amostra blockquote{ font-size:18px; line-height:30px }
  .lp-trilha li{ font-size:0 }
  .lp-trilha li::before{ height:5px }
  .lp-nav{ flex-direction:column-reverse; align-items:stretch }
  .lp-nav .btn{ justify-content:space-between }
  .lp-voltar{ text-align:center; padding:8px }
}

@media (prefers-reduced-motion:reduce){
  .lp-foto, .lp-opcao span, .btn{ transition:none }
}

/* =========================================================
   CTA FIXO (só no mobile, só depois do hero e fora do formulário)
   ========================================================= */
.lp-fixo{
  display:none; position:fixed; left:16px; right:16px; bottom:16px; z-index:60;
  align-items:center; justify-content:space-between; gap:12px;
  padding:12px 12px 12px 24px; border-radius:60px;
  background:var(--marca); color:#fff; box-shadow:0 10px 30px rgba(11,33,43,.28);
  transform:translateY(140%); transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.lp-fixo .circle{ width:34px; height:34px; border-radius:999px; background:#fff; color:var(--marca);
  display:grid; place-items:center; flex:none }
.lp-fixo .circle svg{ width:14px; height:14px }
@media (max-width:767px){
  .lp-fixo{ display:flex }
  body[data-cta] .lp-fixo{ transform:translateY(0) }
}
@media (prefers-reduced-motion:reduce){ .lp-fixo{ transition:none } }