/* =========================================================
   HORIZONTE3 — páginas de artigo (Insights)
   Reaproveita os tokens de styles.css
   ========================================================= */

/* menu mobile overlay (mesmo padrão das demais páginas) */
#mobile-menu{ position:fixed; inset:0; z-index:45; background:var(--ink); color:#F5F3F0;
  display:flex; flex-direction:column; justify-content:center; gap:8px; padding:0 var(--gutter);
  transform:translateY(-100%); transition:transform .5s var(--ease); }
#mobile-menu.open{ transform:none; }
#mobile-menu a{ font-size:1.7rem; font-weight:600; letter-spacing:-0.02em; padding:12px 0;
  border-bottom:1px solid var(--line-dark); }
#mobile-menu .btn{ margin-top:24px; align-self:flex-start; }

/* ---------- cabeçalho do artigo ---------- */
.article-head{ padding-top: clamp(140px, 16vh, 210px); padding-bottom: clamp(40px, 6vh, 72px); }
.article-head .container{ max-width: 920px; }
.article-back{
  display:inline-flex; align-items:center; gap:8px; font-size:.86rem; font-weight:500;
  color:var(--lavender); margin-bottom: clamp(28px,4vh,44px);
  transition: gap .3s var(--ease), color .3s var(--ease);
}
.article-back:hover{ gap:13px; color:#fff; }
.article-cat{
  display:inline-block; font-size:.74rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--lavender); margin-bottom:20px;
}
.article-title{
  font-weight:600; font-size: clamp(2.1rem, 4.6vw, 3.8rem); line-height:1.04;
  letter-spacing:-0.028em; margin:0; max-width: 18ch; text-wrap:balance;
}
.article-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px;
  margin-top: clamp(26px,3.4vh,40px);
  font-size:.92rem; color:#9A9AA0;
}
.article-meta .dot{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6; }
.article-meta strong{ color:#F5F3F0; font-weight:600; }

/* ---------- imagem de capa ---------- */
.article-cover{
  margin: clamp(28px,3.4vw,44px) auto 0; max-width: 1080px; padding-inline: var(--gutter);
}
.article-cover img{
  display:block; width:100%; height:auto; aspect-ratio: 16/9;
  object-fit:cover; border-radius:18px;
  border:1px solid var(--line);
  box-shadow: 0 18px 50px -38px rgba(11,11,12,.35);
}

/* ---------- corpo / prosa ---------- */
.article-body{ padding-top: clamp(48px,6vw,84px); padding-bottom: clamp(70px,9vw,120px); }
.prose{ max-width: 70ch; margin-inline:auto; }
.prose > .lede{
  font-size: clamp(1.24rem,1.75vw,1.58rem); line-height:1.5; font-weight:500;
  letter-spacing:-0.012em; color:var(--fg); margin:0 0 clamp(28px,3.4vw,42px); text-wrap:pretty;
}
.prose p{
  font-size: clamp(1.06rem,1.2vw,1.16rem); line-height:1.72; color:#3A3A40;
  margin: 0 0 1.5em; text-wrap:pretty;
}
.prose h2{
  font-weight:600; font-size: clamp(1.5rem,2.2vw,2.05rem); line-height:1.14;
  letter-spacing:-0.018em; color:var(--fg); margin: clamp(40px,5vw,66px) 0 .7em;
  text-wrap:balance;
}
.prose h2 .num{ color:var(--accent); font-variant-numeric:tabular-nums; margin-right:.5em; }
.prose strong{ color:var(--fg); font-weight:600; }
.prose a{ color:var(--accent); background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%; }
.prose ul{ list-style:none; margin:0 0 1.6em; padding:0; display:grid; gap:13px; }
.prose ul li{ position:relative; padding-left:24px; font-size: clamp(1.04rem,1.15vw,1.13rem);
  line-height:1.6; color:#3A3A40; }
.prose ul li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:8px;
  background:var(--accent); }
.prose blockquote{
  margin: clamp(36px,4.4vw,56px) 0; padding-left: clamp(24px,3vw,34px);
  border-left:2px solid var(--accent); max-width: 30ch;
}
.prose blockquote p{
  font-size: clamp(1.4rem,2.2vw,1.9rem); line-height:1.32; font-weight:500;
  letter-spacing:-0.015em; color:var(--fg); margin:0;
}
.prose hr{ border:0; border-top:1px solid var(--line); margin: clamp(40px,5vw,64px) 0; }

/* assinatura ao final */
.article-sign{ max-width:70ch; margin: clamp(36px,4vw,52px) auto 0; padding-top: clamp(24px,3vh,34px);
  border-top:1px solid var(--line); display:flex; align-items:center; gap:14px; }
.article-sign__mk{ width:42px; height:42px; border-radius:50%; background:var(--ink);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.article-sign__mk img{ width:60%; height:auto; display:block; }
.article-sign__txt{ font-size:.92rem; color:var(--fg-muted); line-height:1.5; }
.article-sign__txt strong{ color:var(--fg); font-weight:600; }

/* ---------- CTA final ---------- */
.article-cta{ padding-block: clamp(56px,7vw,92px); }
.article-cta .container{ max-width:920px; display:flex; flex-direction:column; align-items:flex-start;
  gap: clamp(20px,2.6vw,30px); }
.article-cta h2{ font-weight:600; font-size: clamp(1.8rem,3vw,2.6rem); line-height:1.1;
  letter-spacing:-0.02em; margin:0; max-width:20ch; color:#F5F3F0; text-wrap:balance; }
.article-cta p{ color:#9A9AA0; font-size: clamp(1.02rem,1.2vw,1.15rem); line-height:1.55;
  margin:0; max-width:46ch; }

/* ---------- mais insights ---------- */
.more{ padding-block: clamp(64px,8vw,108px); }
.more__head{ display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  margin-bottom: clamp(32px,4vw,52px); flex-wrap:wrap; }
.more__title{ font-weight:600; font-size: clamp(1.5rem,2.4vw,2.1rem); letter-spacing:-0.02em; margin:0; }
.more__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(24px,2.6vw,40px); }
.mcard{ display:flex; flex-direction:column; }
.mcard__media{ display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  border-radius:14px; border:1px solid var(--line);
  margin-bottom:20px; }
.mcard__cat{ font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:12px; }
.mcard__title{ font-weight:600; font-size: clamp(1.12rem,1.4vw,1.32rem); line-height:1.2;
  letter-spacing:-0.015em; margin:0; color:var(--fg); transition:color .25s var(--ease); }
.mcard:hover .mcard__title{ color:var(--accent); }

@media (max-width: 860px){
  .article-cover{ transform:none; margin-top: clamp(24px,5vw,36px); }
.article-cover img{ aspect-ratio:16/10; }
  .more__grid{ grid-template-columns:1fr; gap: clamp(36px,8vw,48px); }
  .more__grid .mcard:nth-child(n+3){ display:none; }
}

/* =========================================================
   MURO DE CADASTRO (gate) — libera a leitura após o cadastro
   ========================================================= */

/* conteúdo bloqueado: oculto até o desbloqueio */
.prose__locked{ display:none; }
body.is-unlocked .prose__locked{ display:block; }
body.is-unlocked .gate{ display:none; }

/* animação suave ao desbloquear pelo formulário */
body.just-unlocked .prose__locked{ animation: gateReveal .7s var(--ease) both; }
@keyframes gateReveal{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: none; }
}

/* bloco do gate (vive dentro de .prose, alinhado à coluna de texto) */
.gate{ position:relative; margin-top: clamp(22px,3vw,40px); }
/* esmaecimento que funde o último parágrafo da prévia ao gate */
.gate::before{
  content:""; position:absolute; left:0; right:0; bottom:100%;
  height: clamp(90px,12vw,150px);
  background: linear-gradient(to bottom, transparent, var(--bg) 88%);
  pointer-events:none;
}

.gate__card{
  position:relative;
  border:1px solid var(--line);
  background: var(--bg-2);
  border-radius:18px;
  padding: clamp(26px,3.6vw,46px);
  box-shadow: 0 30px 70px -52px rgba(11,11,12,.45);
}
.gate__card::before{
  content:""; position:absolute; left:0; top:0; width:46px; height:3px;
  background: var(--accent); border-radius: 0 0 3px 0;
}

.gate__eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color: var(--accent); margin-bottom:16px;
}
.gate__eyebrow::before{
  content:""; width:9px; height:9px; background: currentColor; margin-top:-1px;
}
.gate__card .gate__title{
  font-weight:600; font-size: clamp(1.5rem,2.4vw,2.05rem); line-height:1.1;
  letter-spacing:-0.02em; color: var(--fg); margin:0 0 10px;
}
.gate__card .gate__lead{
  font-size: clamp(1rem,1.15vw,1.1rem); line-height:1.55; color: var(--fg-muted);
  margin:0 0 clamp(22px,2.6vw,30px); max-width: 46ch;
}

.gate__form{ display:flex; flex-direction:column; }
.gate__row{
  display:grid; grid-template-columns:1fr 1fr; gap: clamp(13px,1.4vw,18px);
  margin-bottom: clamp(13px,1.4vw,18px);
}
.gate__field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.gate__field > span{ font-size:.82rem; font-weight:500; color: var(--fg-muted); letter-spacing:.01em; }
.gate__field input{
  font-family:inherit; font-size:1rem; color: var(--fg);
  background: var(--bg); border:1px solid var(--line); border-radius:10px;
  padding:13px 15px; outline:none; width:100%;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.gate__field input::placeholder{ color: var(--gray-500); }
.gate__field input:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(134,18,240,.12); }
.gate__field.is-invalid input{ border-color:#D9534F; }
.gate__err{ display:none; font-style:normal; font-size:.74rem; color:#D9534F; }
.gate__field.is-invalid .gate__err{ display:block; }

.gate__submit{
  appearance:none; cursor:pointer; align-self:flex-start;
  height:54px; padding-inline:30px; margin-top: clamp(8px,1vw,12px);
  border:0; border-radius:999px; background: var(--fg); color: var(--bg);
  font-family:inherit; font-weight:600; font-size:1rem; letter-spacing:-0.01em;
  display:inline-flex; align-items:center; gap:.5em;
  transition: background .3s var(--ease), color .3s var(--ease), transform .2s var(--ease);
}
.gate__submit:hover{ background: var(--accent); color:#fff; transform: translateY(-1px); }
.gate__submit:active{ transform: translateY(0); }
.gate__card .gate__note{
  font-size:.82rem; line-height:1.5; color: var(--fg-muted);
  margin: clamp(16px,2vw,22px) 0 0; max-width: 50ch;
}

@media (max-width: 560px){
  .gate__row{ grid-template-columns:1fr; }
  .gate__submit{ align-self:stretch; justify-content:center; }
}

/* ---------- gate: envio real (/api/lead) ---------- */
.gate__turnstile:not(:empty){ margin-top:14px; }
.gate__error{ font-size:.88rem; color:#D9534F; margin:12px 0 0; }
.gate__skip{ background:none; border:none; padding:0; color:var(--accent); font:inherit; font-weight:600; cursor:pointer; text-decoration:underline; }
.gate__submit:disabled{ opacity:.6; cursor:default; transform:none; }