/* =========================================================================
   LUIZA MIDORY · landing pages de produto — escrito mobile first
   (carregar sempre depois de base.css)
   ========================================================================= */

/* ---------------- HERO ---------------- */
.lp-hero{
  position:relative;display:flex;flex-direction:column;
  padding:calc(var(--navh) + 30px) var(--pad-narrow) 0;
}
.lp-hero-copy{position:relative;z-index:2}
.lp-hero h1{margin:16px 0 0;font-size:clamp(36px,9.4vw,88px)}
.lp-hero h1 .ln{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.lp-hero h1 .ln i{display:block;font-style:normal}
.lp-hero .cadence{margin-top:22px}
.lp-hero .sub{margin:20px 0 26px;max-width:38ch;font-size:15px;line-height:1.65;color:rgba(248,247,242,.82)}

.lp-actions{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.lp-actions .btn{width:100%}
.lp-meta{
  display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;
  margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);
}
.lp-meta .v{font-size:17px;font-weight:800;letter-spacing:-.04em;line-height:1.15}
.lp-meta .k{font:400 11px/1.55 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:rgba(248,247,242,.55);margin-top:5px}

/* capa: contida na tela, nunca cortada */
.lp-cover{
  position:relative;z-index:1;width:100%;
  display:flex;justify-content:center;
  margin:34px 0 0;padding-bottom:18px;perspective:900px;
}
.lp-cover .bk{position:relative;left:auto;top:auto;
  animation:enterBook 1.2s var(--e) .4s backwards}
.lp-cover .book{--bw:min(200px,52vw);--r:-8deg;--ry:10deg}

.lp-hero .eyebrow,.lp-hero h1 .ln i,.lp-hero .cadence,.lp-hero .sub,.lp-hero .lp-actions,.lp-hero .lp-meta{
  animation:enter 1s var(--e) backwards;
}
.lp-hero .eyebrow{animation-delay:.1s}
.lp-hero h1 .ln:nth-of-type(1) i{animation-delay:.2s}
.lp-hero h1 .ln:nth-of-type(2) i{animation-delay:.3s}
.lp-hero .cadence{animation-delay:.42s}
.lp-hero .sub{animation-delay:.5s}
.lp-hero .lp-actions{animation-delay:.58s}
.lp-hero .lp-meta{animation-delay:.66s}

@media(min-width:620px){
  .lp-actions{flex-direction:row;flex-wrap:wrap;align-items:center}
  .lp-actions .btn{width:auto;min-width:250px}
  .lp-meta{grid-template-columns:repeat(4,1fr);gap:22px}
}
@media(min-width:1024px){
  .lp-hero{flex-direction:row;align-items:center;min-height:92svh;
    padding:calc(var(--navh) + 40px) var(--pad-narrow) 90px}
  .lp-hero-copy{max-width:min(56vw,720px)}
  .lp-hero h1{margin:24px 0 0}
  .lp-hero .cadence{margin-top:32px}
  .lp-hero .sub{margin:26px 0 34px;max-width:34ch}
  .lp-meta{margin-top:42px;padding-top:22px;max-width:560px}
  .lp-meta .v{font-size:19px}
  .lp-cover{position:absolute;right:max(2vw,16px);top:50%;
    width:min(38vw,420px);margin:0;padding:0;transform:translateY(-48%);perspective:1100px}
  .lp-cover .book{--bw:min(27vw,290px)}
}

/* ---------------- PARA QUEM É ---------------- */
.fit{display:grid;grid-template-columns:1fr;gap:1px;background:var(--paper-3);
  border:1px solid var(--paper-3);margin-top:40px}
.fit>div{background:var(--paper);padding:28px 22px}
.fit h3{font-size:19px;letter-spacing:-.04em;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.fit h3 i{font-style:normal;font-size:14px}
.fit .yes h3 i{color:var(--green)}
.fit .no h3 i{color:#a8563f}
.fit li{font-size:14.5px;line-height:1.6;color:var(--mute);padding:11px 0;border-top:1px solid var(--paper-3)}
.fit li:first-of-type{border-top:0;padding-top:0}
@media(min-width:820px){
  .fit{grid-template-columns:1fr 1fr;margin-top:60px}
  .fit>div{padding:38px 34px}
  .fit h3{font-size:20px;margin-bottom:22px}
}

/* ---------------- O QUE VOCÊ RECEBE ---------------- */
.deliver{display:grid;grid-template-columns:1fr;gap:1px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12);margin-top:40px}
.dv{background:var(--ink);padding:28px 22px;display:grid;gap:12px;align-content:start;
  transition:background .4s var(--e)}
.dv:hover{background:var(--ink-3)}
.dv .n{font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--gold)}
.dv h3{font-size:20px;letter-spacing:-.04em;line-height:1.18}
.dv p{font-size:14.5px;line-height:1.68;color:rgba(244,242,237,.64)}
@media(min-width:820px){
  .deliver{grid-template-columns:repeat(2,1fr);margin-top:64px}
  .dv{padding:38px 34px;gap:13px}
  .dv h3{font-size:21px}
}

/* ---------------- COMO FUNCIONA ---------------- */
.howto{display:grid;grid-template-columns:1fr;gap:36px;margin-top:40px}
.steps-num{display:grid}
.sn{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:22px 0;border-top:1px solid var(--paper-3)}
.sn:last-child{border-bottom:1px solid var(--paper-3)}
.sn .n{font:500 10px/1 var(--mono);letter-spacing:.12em;color:var(--gold);padding-top:7px}
.sn h3{font-size:20px;letter-spacing:-.04em;margin-bottom:7px}
.sn p{font-size:14.5px;line-height:1.68;color:var(--mute)}
@media(min-width:960px){
  .howto{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,90px);
    align-items:center;margin-top:66px}
  .sn{grid-template-columns:52px 1fr;gap:20px;padding:26px 0}
  .sn h3{font-size:21px}
}

/* mock do "seu dia" */
.dash{position:relative;background:#18203a;color:#edf1fc;padding:22px 20px;
  box-shadow:0 30px 60px rgba(23,32,56,.3)}
@media(min-width:960px){.dash{padding:26px 28px;transform:perspective(1100px) rotateX(6deg) rotateY(-4deg)}}
.dash-top{font-size:9.5px;display:flex;justify-content:space-between;gap:12px;
  border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:14px;
  font-family:var(--mono);letter-spacing:.05em}
.dash-top b{color:var(--gold)}
.dash-body{padding-top:24px;display:grid;gap:20px}
.dash-body .lbl{font:400 9.5px/1.6 var(--mono);letter-spacing:.12em;color:#afc0ef;text-transform:uppercase}
.dash h3{font-size:clamp(23px,5.4vw,32px);letter-spacing:-.055em;line-height:1;margin-top:8px}
.bar-wrap{height:5px;background:rgba(255,255,255,.14);overflow:hidden}
.bar-fill{height:100%;width:63%;background:var(--gold)}
.dash-rows{display:grid;gap:8px;margin-top:4px}
.dash-row{display:grid;grid-template-columns:16px 1fr auto;gap:10px;align-items:center;
  font-size:12px;line-height:1.35;padding:10px 0;border-top:1px solid rgba(255,255,255,.1)}
.dash-row i{font-style:normal;font-size:10px;color:var(--gold)}
.dash-row .t{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:#afc0ef}
.dash-row.done{opacity:.45;text-decoration:line-through}

/* ---------------- OFERTA ---------------- */
.offer-wrap{position:relative;z-index:2;display:grid;gap:34px}
.offer-copy h2{margin:16px 0 20px}
.offer-copy .body{color:rgba(244,242,237,.74)}
.guarantee{display:flex;gap:14px;align-items:flex-start;margin-top:26px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.16)}
.guarantee .sh{flex:0 0 34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--gold);color:var(--gold);font-size:13px}
.guarantee p{font-size:13.5px;line-height:1.62;color:rgba(244,242,237,.68);max-width:44ch}
@media(min-width:1024px){
  .offer-wrap{grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,6vw,90px);
    justify-content:space-between;align-items:center}
  .offer-copy{max-width:480px}
  .offer-copy h2{margin:24px 0 26px}
}

/* ---------------- CROSS-SELL ---------------- */
.cross{display:grid;grid-template-columns:1fr;gap:14px;margin-top:36px}
.cx{display:flex;gap:18px;align-items:center;background:#fff;border:1px solid var(--paper-3);padding:18px;
  transition:transform .4s var(--e),border-color .4s var(--e)}
.cx:hover{transform:translateY(-4px);border-color:var(--gold)}
.cx-img{flex:0 0 74px;height:98px;overflow:hidden;background:var(--paper-2)}
.cx-img img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.cx-img.art{display:grid;place-items:center;background:linear-gradient(200deg,#1c212c,#0a0d13);
  color:var(--gold);font:500 8px/1.5 var(--mono);letter-spacing:.11em;text-align:center;padding:8px}
.cx h3{font-size:18px;letter-spacing:-.04em;margin-bottom:5px}
.cx p{font-size:13.5px;line-height:1.55;color:var(--mute);margin-bottom:6px}
@media(min-width:820px){
  .cross{grid-template-columns:repeat(2,1fr);gap:clamp(18px,2vw,26px);margin-top:52px}
  .cx{gap:22px;padding:22px}
  .cx-img{flex:0 0 84px;height:112px}
}