/* Identidade da landing de oferta da Lhala. Tokens do tema real
   (site/tema-lhala/theme.json). Um arquivo so: o hub e as paginas de
   kit leem daqui, para nao existir CSS duplicado. */

@font-face{font-family:'Open Sans';src:url("fonts/OpenSans-Variable.woff2") format("woff2");font-weight:300 800;font-display:swap}

:root{
  --brand:#EF4735; --accent:#D8472E; --accent-deep:#C13A22; --link:#B5341D;
  --accent-tint:#FBEEE6; --base:#FBFAF8; --surface:#FFFFFF; --surface-cool:#F1F4F7;
  --ink:#1A1714; --ink-soft:#4A463E; --muted:#6E685C; --line:#E6E1D8;
  --ink-section:#16140F;
  --sp-30:1rem; --sp-40:1.5rem; --sp-50:2.5rem; --sp-60:4rem;
  --sp-70:clamp(3.5rem,8vw,7rem);
  --font:'Open Sans','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --shadow:0 1px 2px rgba(26,23,20,.04),0 12px 32px -16px rgba(26,23,20,.12);
  --wide:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--base); color:var(--ink);
  font-family:var(--font); font-size:1.125rem; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
h1,h2,h3{font-weight:800; line-height:1.1; letter-spacing:-.02em; margin:0 0 var(--sp-30)}
h1{font-size:clamp(2.1rem,6vw,3.6rem)}
h2{font-size:clamp(1.7rem,4.5vw,2.5rem)}
h3{font-size:clamp(1.25rem,3.4vw,1.5rem); font-weight:700; letter-spacing:-.01em}
p{margin:0 0 var(--sp-30); max-width:68ch}
a{color:var(--link)}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid var(--accent); outline-offset:3px; border-radius:4px;
}

.wrap{width:100%; max-width:var(--wide); margin-inline:auto; padding-inline:clamp(1.15rem,4vw,2rem)}
.section{padding-block:var(--sp-70)}
.eyebrow{
  font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  color:var(--brand); margin:0 0 var(--sp-30);
}
.lede{font-size:clamp(1.1rem,2.4vw,1.28rem); color:var(--ink-soft); max-width:60ch}
.note{font-size:.95rem; color:var(--muted); max-width:62ch}
.skip{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff;
  padding:.7rem 1.1rem; z-index:99;
}
.skip:focus{left:.5rem; top:.5rem}

/* ---- draft banner: shows while any [[FALTA is unresolved ---- */
.draft{
  background:#3A2410; color:#FFF3E2; padding:.9rem 0; font-size:.95rem;
  border-bottom:3px solid var(--brand);
}
.draft strong{color:#FFC98A}
.draft ul{margin:.5rem 0 0; padding-left:1.2rem}
.draft li{margin:.15rem 0}

/* ---- missing-content marker: unmistakable, never mistaken for copy ---- */
.falta{
  display:inline-block; background:#FFF0D8; color:#7A4A00;
  border:1px dashed #C98A2E; border-radius:6px;
  padding:.1em .5em; font-size:.85em; font-weight:600;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; line-height:1.45;
}

/* ---- header ---- */
.head{
  background:rgba(251,250,248,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
}
.head-in{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-30); padding-block:.85rem}
.head-in img{height:26px; width:auto}
.head-tag{font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
@media (max-width:480px){ .head-tag{display:none} }

/* ---- hero ---- */
.hero{padding-block:var(--sp-60) var(--sp-50); border-bottom:1px solid var(--line)}
.hero h1{max-width:22ch}
.valid{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:var(--sp-40);
  background:var(--accent-tint); border:1px solid #F0D3BE; border-radius:999px;
  padding:.45rem 1rem; font-size:.95rem; font-weight:600; color:#7A2E17;
}

/* ---- kits ---- */
.kits{display:grid; gap:var(--sp-40); grid-template-columns:1fr}
@media (min-width:720px){
  .kits{grid-template-columns:repeat(2,1fr)}
  .kit.is-feature{grid-column:1 / -1}
}
@media (min-width:1040px){
  .kits{grid-template-columns:repeat(3,1fr)}
}
.kit{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:clamp(1.25rem,3vw,1.85rem); box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:var(--sp-30);
}
.kit.is-feature{border:2px solid var(--accent); padding-top:calc(clamp(1.25rem,3vw,1.85rem) - 1px)}
.kit-col{display:flex; flex-direction:column; gap:var(--sp-30); min-width:0}
@media (min-width:900px){
  .kit.is-feature{flex-direction:row; align-items:stretch; gap:var(--sp-50)}
  .kit.is-feature > .kit-col{flex:1 1 0}
  .kit.is-feature .kit-media{flex:1; align-items:center}
  .kit.is-feature .kit-media img{max-height:260px}
}
.kit-flag{
  align-self:flex-start; white-space:nowrap; background:var(--accent-deep); color:#fff;
  font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.3rem .7rem; border-radius:999px;
}
.kit-media{
  background:var(--base); border-radius:10px; padding:1rem;
  display:flex; align-items:center; justify-content:center; min-height:150px;
}

/* A foto do kit abre a pagina dele. Precisa de sinal visivel: no celular nao ha
   hover, entao a dica fica sempre a vista em tela pequena. */
.kit-media-link{
  display:block; position:relative; border-radius:10px; text-decoration:none;
  color:var(--link); transition:transform .15s ease;
}
.kit-media-link .kit-media{transition:box-shadow .15s ease}
.kit-media-link:hover{transform:translateY(-2px)}
.kit-media-link:hover .kit-media{box-shadow:var(--shadow)}
.kit-media-link:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
/* A dica fica SOBRE a foto, nao abaixo dela: assim nao vira uma linha de link
   embaixo da imagem — e o sinal de que a propria foto abre a pagina. */
.kit-media-dica{
  position:absolute; left:1.35rem; right:1.35rem; bottom:1.35rem;
  background:rgba(26,23,20,.88); color:#fff; border-radius:999px;
  padding:.5rem .9rem; text-align:center;
  font-size:.9rem; font-weight:600; line-height:1.3;
}
@media (hover:hover) and (min-width:720px){
  /* onde ha ponteiro, a dica so aparece quando ele chega perto */
  .kit-media-dica{opacity:0; transition:opacity .15s ease}
  .kit-media-link:hover .kit-media-dica,
  .kit-media-link:focus-visible .kit-media-dica{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .kit-media-link,.kit-media-link .kit-media,.kit-media-dica{transition:none}
  .kit-media-link:hover{transform:none}
}

/* titulo do card tambem leva a pagina do kit */
.kit h3 a{color:inherit; text-decoration:none}
.kit h3 a:hover{text-decoration:underline; text-decoration-color:var(--accent);
  text-underline-offset:3px}
.kit-media{gap:1rem}
.kit-media img{max-height:230px; width:auto; object-fit:contain;
  filter:drop-shadow(0 24px 48px rgba(26,23,20,.22))}
.kit-tier{
  font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  color:var(--muted); margin:0 0 -.35rem;
}
.kit h3{margin:0}
.kit-save{margin:.35rem 0 0; font-size:.95rem; font-weight:600; color:var(--link)}
.kits-nota{margin-top:var(--sp-50); max-width:80ch; font-size:.9rem}
.kit-sum{color:var(--ink-soft); font-size:1rem; margin:0}
.kit-list{margin:0; padding:0; list-style:none; border-top:1px solid var(--line)}
.kit-list li{
  padding:.6rem 0 .6rem 1.5rem; border-bottom:1px solid var(--line);
  font-size:1rem; color:var(--ink-soft); position:relative;
}
.kit-list li::before{
  content:""; position:absolute; left:.15rem; top:1.12rem;
  width:.45rem; height:.45rem; border-radius:50%; background:var(--accent);
}
.kit-label{
  font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .35rem;
}
.price{display:flex; align-items:baseline; flex-wrap:wrap; gap:.6rem .75rem; margin:0}
.price-was{color:var(--muted); text-decoration:line-through; font-size:1.05rem}
.price-now{font-size:clamp(1.8rem,5vw,2.3rem); font-weight:800; letter-spacing:-.02em; line-height:1}
.price-off{
  background:var(--accent-tint); color:#7A2E17; border-radius:999px;
  padding:.2rem .6rem; font-size:.85rem; font-weight:700;
}
.kit-meta{
  display:grid; gap:.35rem; background:var(--surface-cool); border-radius:10px;
  padding:.85rem 1rem; font-size:.95rem;
}
.kit-meta div{display:flex; justify-content:space-between; gap:1rem}
.kit-meta dt,.kit-meta span:first-child{color:var(--muted)}
.kit-meta strong{font-weight:700; font-variant-numeric:tabular-nums}
.btn{
  display:block; width:100%; text-align:center; background:var(--accent-deep);
  color:#fff; text-decoration:none; font-weight:600; font-size:1.05rem;
  padding:.95rem 1.6rem; border-radius:999px; border:0; cursor:pointer;
  min-height:48px; transition:background .15s ease;
}
.btn:hover{background:var(--link); color:#fff}
.btn.is-off{background:#BDB6A8; cursor:not-allowed}
.kit-foot{margin-top:auto; display:grid; gap:.75rem}

/* ---- return / calculator ---- */
.ret{background:var(--surface-cool); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.calc{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:clamp(1.25rem,3vw,1.85rem); box-shadow:var(--shadow); max-width:760px;
}
.calc label,.roi label{display:block; font-weight:600; font-size:1rem; margin-bottom:.4rem}
.calc-in{display:flex; align-items:center; gap:.6rem; max-width:320px}
.calc-in span{color:var(--muted); font-weight:600}
.calc input,.roi input{
  font:inherit; font-size:1.05rem; padding:.7rem .9rem; width:100%;
  border:1px solid var(--line); border-radius:10px; background:var(--base); color:var(--ink);
}
.calc input:focus,.roi input:focus{border-color:var(--accent); background:var(--accent-tint)}
.calc table{width:100%; border-collapse:collapse; margin-top:var(--sp-40); font-size:1rem}
.calc th,.calc td{text-align:left; padding:.7rem .5rem; border-bottom:1px solid var(--line)}
.calc th{font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600}
.calc td{font-variant-numeric:tabular-nums}
.calc td:first-child{font-weight:600}
.calc .out{font-weight:700}
@media (max-width:560px){
  .calc thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .calc tr{display:block; padding:.85rem 0; border-bottom:1px solid var(--line)}
  .calc tr:last-child{border-bottom:0}
  .calc td{display:flex; justify-content:space-between; align-items:baseline;
           gap:1rem; border:0; padding:.2rem 0}
  .calc td::before{content:attr(data-rotulo); color:var(--muted); font-weight:600;
                   font-size:.85rem; letter-spacing:.04em}
  .calc td:first-child{display:block; font-weight:700; margin-bottom:.35rem}
  .calc td:first-child::before{content:none}
}

/* ---- close ---- */
.close{background:var(--ink-section); color:#F3EFE9}
.close h2{color:#fff; max-width:24ch}
.close p{color:#CFC8BD}
.close .btn{display:inline-block; width:auto; min-width:min(100%,320px)}
.foot{background:var(--ink-section); color:#8E877C; font-size:.9rem; padding-block:var(--sp-40); border-top:1px solid #2B271F}
.foot img{height:22px; width:auto; opacity:.85; margin-bottom:.75rem}
.foot p{max-width:70ch; margin:0}

/* ===== paginas dedicadas de kit ===== */
/* ---- pagina dedicada de kit ---- */
.kit-hero{padding-block:var(--sp-60) var(--sp-50); border-bottom:1px solid var(--line)}
.kit-hero-grid{display:grid; gap:var(--sp-50); align-items:start}
@media (min-width:900px){ .kit-hero-grid{grid-template-columns:1fr 1fr; gap:var(--sp-60)} }
.kit-hero h1{margin-bottom:var(--sp-30)}
.kit-hero .kit-media{min-height:260px}
.kit-hero .kit-media img{max-height:330px}
.buy-box{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:clamp(1.25rem,3vw,1.75rem); box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:var(--sp-30);
}
.buy-box.is-feature{border:2px solid var(--accent)}
.voltar{display:inline-block; margin-bottom:var(--sp-40); font-size:.95rem; font-weight:600}
.comp{margin:0; padding:0; list-style:none; display:grid; gap:var(--sp-30)}
.comp li{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:1.1rem 1.25rem;
}
@media (min-width:760px){ .comp{grid-template-columns:repeat(2,1fr)} }
.comp-nome{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin:0 0 .35rem}
.comp-nome strong{font-size:1.1rem; font-weight:700}
.comp-qtd{
  background:var(--accent-tint); color:#7A2E17; border-radius:999px;
  padding:.15rem .6rem; font-size:.82rem; font-weight:700; white-space:nowrap;
}
.comp p{margin:0; color:var(--ink-soft); font-size:1rem; max-width:none}
.comp-formato{
  margin-top:.5rem !important; font-size:.88rem; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.roi{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:clamp(1.25rem,3vw,1.85rem); box-shadow:var(--shadow); max-width:720px;
}
.roi-linhas{display:grid; gap:0; margin-top:var(--sp-40)}
.roi-linha{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.85rem 0; border-bottom:1px solid var(--line);
}
.roi-linha:last-child{border-bottom:0}
.roi-linha span{color:var(--ink-soft)}
.roi-linha strong{font-size:1.25rem; font-weight:800; font-variant-numeric:tabular-nums}
.roi-linha.is-total strong{color:var(--link); font-size:1.5rem}
.roi-fixo{background:var(--surface-cool); border-radius:10px; padding:.85rem 1rem; margin-bottom:var(--sp-40)}
.roi-fixo .roi-linha{padding:.4rem 0; border-bottom:0}
.roi-fixo .roi-linha strong{font-size:1.1rem}


/* ===== bloco de marca no hero do hub =====
   Quem chega pela newsletter do parceiro pode nunca ter ouvido falar da marca.
   Fica separado do resto do hero por um filete, para ler como contexto e nao
   como argumento de venda. */
.marca{
  margin-top:var(--sp-50); padding-top:var(--sp-50);
  border-top:2px solid var(--accent); max-width:var(--wide);
}
.marca-titulo{
  font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  color:var(--brand); margin:0 0 var(--sp-30); letter-spacing:.14em;
}
.marca-texto{font-size:1.05rem; color:var(--ink-soft); max-width:70ch; margin:0}
.marca-pontos{
  list-style:none; margin:var(--sp-40) 0 0; padding:0;
  display:grid; gap:var(--sp-40);
}
@media (min-width:860px){ .marca-pontos{grid-template-columns:repeat(3,1fr); gap:var(--sp-50)} }
.marca-pontos li{border-top:1px solid var(--line); padding-top:.9rem}
.marca-ponto-titulo{
  margin:0 0 .35rem; font-weight:700; font-size:1rem; color:var(--ink);
}
.marca-pontos p{margin:0; font-size:.95rem; color:var(--ink-soft); max-width:none}
.marca-link{margin:var(--sp-40) 0 0; font-size:.95rem; font-weight:600}