/* Identidade MentesIA: fundo escuro, degradê azul → ciano → verde do logo */
  :root{
    color-scheme:dark;
    --bg:#07090D;
    --surface:#0E1218;
    --surface-2:#151A22;
    --ink:#F5F7FA;
    --ink-2:#C4CCD7;
    --line:#27303D;
    --blue:#2F6BFF;
    --cyan:#16C6E0;
    --green:#1FE38E;
    --grad:linear-gradient(90deg, var(--blue), var(--cyan) 50%, var(--green));
    --accent:#3FD1C0;
    --accent-ink:#04110D;
    --accent-soft:rgba(22,198,224,.12);
    --term-bg:#0A0D12;
    --term-ink:#F1F4F8;
    --term-dim:#A9B3C1;
    --ok:#1FE38E;
    --display:"Montserrat", "Helvetica Neue", Arial, system-ui, sans-serif;
    --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --gutter:clamp(16px, 4.5vw, 88px);
    --max:1920px;
  }

  @media (min-width:1600px){ html body{font-size:17px} .term-body{font-size:15px} }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }
  body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased}
  a{color:inherit}
  :focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
  .wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--gutter)}
  h1,h2,h3{font-family:var(--display); line-height:1.12; letter-spacing:-0.025em; margin:0; text-wrap:balance}
  p{margin:0}
  .eyebrow{font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
  .grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
/* Destaque do título: marca-texto verde da marca com letra escura (legível em qualquer tela) */
mark{background:var(--green); color:#04110D; padding:0 .14em; margin-left:-.02em; border-radius:.06em;
  display:inline-block; white-space:nowrap; line-height:1.08; margin-top:.1em}

  /* ---------- Header ---------- */
  .top{position:sticky; top:env(safe-area-inset-top, 0px); z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
  .top .wrap{display:flex; align-items:center; gap:24px; height:64px}
  .logo{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--display); font-weight:600; font-size:21px; letter-spacing:-0.01em}
  .logo b{font-weight:600; background:linear-gradient(90deg, var(--cyan), var(--green)); -webkit-background-clip:text; background-clip:text; color:transparent}
  .logo svg{flex:none}
  .nav{display:flex; gap:4px; margin-left:auto}
  .nav a{text-decoration:none; font-weight:500; font-size:15px; padding:8px 12px; border-radius:8px; color:var(--ink-2)}
  .nav a:hover{color:var(--ink); background:var(--surface-2)}
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--body); font-weight:600; font-size:15px; text-decoration:none; border:0; cursor:pointer; padding:12px 20px; border-radius:10px; transition:transform .15s ease, background .15s ease}
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--grad); color:var(--accent-ink)}
  .btn-primary:hover{filter:brightness(1.1); box-shadow:0 8px 24px -8px rgba(31,227,142,.45)}
  .btn-ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line)}
  .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--cyan)}
  .btn-sm{padding:9px 14px; font-size:14px}
  @media (max-width:820px){ .nav{display:none} .top .btn{margin-left:auto} }

  /* ---------- Hero ---------- */
  .hero{background:radial-gradient(60% 80% at 85% 20%, rgba(22,198,224,.10), transparent 70%), radial-gradient(50% 70% at 10% 0%, rgba(47,107,255,.10), transparent 70%);padding-block:clamp(40px, 7vw, 88px) clamp(40px, 6vw, 72px)}
  .hero .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px, 5vw, 64px); align-items:center}
  .hero h1{font-size:clamp(38px, 5vw, 96px); font-weight:700; letter-spacing:-0.03em; margin-top:16px}
  .hero .lede{font-size:clamp(17px, 1.3vw, 21px); color:var(--ink-2); max-width:38em; margin-top:20px}
  .hero .ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
  .hero .facts{display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:32px; font-size:14px; color:var(--ink-2)}
  .hero .facts span{display:flex; align-items:center; gap:8px}
  .hero .facts span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green)}
  @media (max-width:900px){ .hero .wrap{grid-template-columns:1fr} }

  /* Prompt do dia (terminal) */
  .term{background:var(--term-bg); color:var(--term-ink); border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:0 30px 80px -30px rgba(22,198,224,.25)}
  .term-bar{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.08); font-family:var(--mono); font-size:13px; color:var(--term-dim)}
  .term-bar i{width:10px; height:10px; border-radius:50%; background:#343B4D; display:block}
  .term-bar .label{margin-left:6px}
  .term-body{padding:20px 20px 16px; font-family:var(--mono); font-size:14px; line-height:1.65; min-height:220px}
  .term-body .who{color:var(--green); font-weight:500}
  .term-body .txt{white-space:pre-wrap}
  .caret{display:inline-block; width:8px; height:1.1em; background:var(--green); vertical-align:-2px; margin-left:2px; animation:blink 1s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}
  .term-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-top:1px solid rgba(255,255,255,.08); flex-wrap:wrap}
  .term-foot .tag{font-family:var(--mono); font-size:13px; color:var(--term-dim)}
  .term-foot .row{display:flex; gap:8px}
  .term-btn{font-family:var(--mono); font-size:13px; background:rgba(255,255,255,.1); color:var(--term-ink); border:0; border-radius:6px; padding:7px 10px; cursor:pointer}
  .term-btn:hover{background:rgba(255,255,255,.16)}

  /* ---------- Sections ---------- */
  section.block{padding-block:clamp(56px, 8vw, 96px); border-top:1px solid var(--line)}
  .sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:32px}
  .sec-head h2{font-size:clamp(30px, 3.4vw, 54px); font-weight:700; margin-top:10px}
  .sec-head p{color:var(--ink-2); max-width:34em; margin-top:10px}

  /* Novidades */
  .chips{display:flex; flex-wrap:wrap; gap:8px}
  .chip{font-family:var(--body); font-size:14px; font-weight:500; border:1.5px solid var(--line); background:transparent; color:var(--ink-2); border-radius:999px; padding:7px 14px; cursor:pointer}
  .chip:hover{border-color:var(--ink); color:var(--ink)}
  .chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg)}
  .chip:hover{border-color:var(--cyan)}
  .posts{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px}
  .post{display:flex; flex-direction:column; gap:12px; text-decoration:none; padding:20px 0 0; border-top:2px solid var(--line)}
  .post:hover{border-top-color:var(--cyan)}
  .post.feature{grid-column:span 2; grid-row:span 2; background:linear-gradient(135deg, #0C2257, #093F4B 55%, #0A4A33); color:var(--ink); border:0; border-radius:18px; padding:clamp(24px, 3vw, 36px); justify-content:flex-end; min-height:340px; position:relative; overflow:hidden}
  .post.feature canvas{position:absolute; inset:0; width:100%; height:100%; opacity:.7}
  .post.feature > *:not(canvas){position:relative}
  .post .meta{display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; font-family:var(--mono); font-size:13px; color:var(--ink-2)}
  .post.feature .meta{color:inherit; opacity:1}
  .post .cat{text-transform:uppercase; letter-spacing:.06em}
  .post h3{font-size:21px; font-weight:700}
  .post.feature h3{font-size:clamp(26px, 3vw, 36px)}
  .post p{color:var(--ink-2); font-size:15px}
  .post.feature p{color:inherit; opacity:1; max-width:30em}
  .post:hover h3{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px}
  @media (max-width:900px){ .posts{grid-template-columns:1fr 1fr} .post.feature{grid-column:span 2; grid-row:auto} }
  @media (max-width:560px){ .posts{grid-template-columns:1fr} .post.feature{grid-column:auto} }

  /* Materiais gratuitos */
  .free{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px}
  .freebie{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px; display:flex; flex-direction:column; gap:14px}
  .freebie .fmt{align-self:flex-start; font-family:var(--mono); font-size:13px; background:var(--accent-soft); color:var(--cyan); border-radius:6px; padding:4px 8px}
  .freebie h3{font-size:22px; font-weight:700}
  .freebie p{color:var(--ink-2); font-size:15px; flex:1}
  .freebie ul{margin:0; padding:0; list-style:none; display:grid; gap:6px; font-size:14px; color:var(--ink-2)}
  .freebie li::before{content:"→ "; color:var(--green); font-weight:600}
  .freebie .btn{margin-top:6px}
  @media (max-width:900px){ .free{grid-template-columns:1fr} }

  /* Loja */
  .shop{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; align-items:stretch}
  .product{background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column}
  .product.best{border:1px solid transparent; background:linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box}
  .cover{aspect-ratio:16/10; max-width:100%; position:relative; display:flex; align-items:flex-end; padding:18px; background:var(--surface-2); overflow:hidden}
  .cover canvas{position:absolute; inset:0; width:100%; height:100%}
  .cover .ctitle{position:relative; font-family:var(--display); font-weight:700; font-size:27px; letter-spacing:-0.03em; line-height:1; color:var(--ink)}
  .badge{position:absolute; top:14px; right:14px; background:var(--green); color:var(--accent-ink); font-size:12px; font-weight:600; border-radius:999px; padding:4px 10px}
  .pbody{padding:22px; display:flex; flex-direction:column; gap:12px; flex:1}
  .ptype{font-family:var(--mono); font-size:13px; color:var(--ink-2); text-transform:uppercase; letter-spacing:.06em}
  .pbody h3{font-size:22px; font-weight:700}
  .pbody p{font-size:15px; color:var(--ink-2)}
  .pbody ul{margin:0; padding:0; list-style:none; display:grid; gap:6px; font-size:14px; flex:1}
  .pbody li{display:flex; gap:8px}
  .pbody li svg{flex:none; margin-top:4px; color:var(--ok)}
  .price{display:flex; align-items:baseline; gap:10px; margin-top:6px; font-variant-numeric:tabular-nums}
  .price .now{font-family:var(--display); font-weight:700; font-size:32px; letter-spacing:-0.02em}
  .price .old{color:var(--ink-2); text-decoration:line-through; font-size:15px}
  .price .inst{font-size:13px; color:var(--ink-2); width:100%}
  .price{flex-wrap:wrap; row-gap:0}
  .pbody .btn{width:100%}
  .secure{display:flex; align-items:center; gap:10px; justify-content:center; font-size:13px; color:var(--ink-2); margin-top:24px; text-align:center}
  @media (max-width:980px){ .shop{grid-template-columns:1fr 1fr} }
  @media (max-width:620px){ .shop{grid-template-columns:1fr} }

  /* Como funciona */
  .steps{display:grid; grid-template-columns:repeat(3, 1fr); gap:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface)}
  .step{padding:28px; display:flex; flex-direction:column; gap:10px}
  .step + .step{border-left:1px solid var(--line)}
  .step .n{font-family:var(--mono); font-size:13px; color:var(--green); font-weight:500}
  .step h3{font-size:20px; font-weight:700}
  .step p{color:var(--ink-2); font-size:15px}
  @media (max-width:820px){ .steps{grid-template-columns:1fr} .step + .step{border-left:0; border-top:1px solid var(--line)} }

  /* Newsletter */
  .news{background:radial-gradient(70% 120% at 100% 0%, rgba(31,227,142,.14), transparent 60%), radial-gradient(60% 100% at 0% 100%, rgba(47,107,255,.16), transparent 60%), var(--surface); border:1px solid var(--line); color:var(--term-ink); border-radius:24px; padding:clamp(28px, 5vw, 56px); display:grid; grid-template-columns:1.1fr 1fr; gap:32px; align-items:center}
  .news h2{font-size:clamp(28px, 3.6vw, 42px); font-weight:700}
  .news p{color:var(--term-dim); margin-top:12px}
  .news form{display:flex; flex-direction:column; gap:10px}
  .news .row{display:flex; gap:10px; flex-wrap:wrap}
  .news input{flex:1 1 220px; min-width:0; font:inherit; font-size:16px; padding:13px 16px; border-radius:10px; border:1.5px solid var(--line); background:var(--bg); color:var(--term-ink)}
  .news input::placeholder{color:#7B8295}
  .news input:focus{outline:none; border-color:var(--cyan)}
    .news small{font-size:13px; color:var(--term-dim)}
  .news .msg{font-size:14px; color:var(--green); min-height:1.4em}
  @media (max-width:820px){ .news{grid-template-columns:1fr} }

  /* FAQ */
  .faq{display:grid; gap:0; max-width:820px}
  .faq details{border-bottom:1px solid var(--line); padding-block:18px}
  .faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; font-family:var(--display); font-weight:700; font-size:19px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+"; font-family:var(--mono); color:var(--green); font-size:20px; line-height:1}
  .faq details[open] summary::after{content:"–"}
  .faq details p{color:var(--ink-2); margin-top:10px; max-width:62ch}

  /* Footer */
  footer{border-top:1px solid var(--line); padding-block:40px 48px; margin-top:clamp(56px, 8vw, 96px)}
  footer .wrap{display:flex; flex-wrap:wrap; gap:24px 48px; justify-content:space-between; align-items:flex-start}
  footer .cols{display:flex; flex-wrap:wrap; gap:24px 48px; font-size:14px}
  footer .cols div{display:grid; gap:8px}
  footer .cols a{text-decoration:none; color:var(--ink-2)}
  footer .cols a:hover{color:var(--ink)}
  footer .legal{width:100%; font-size:13px; color:var(--ink-2); border-top:1px solid var(--line); padding-top:20px}

  .toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); transform:translate(-50%, 20px); background:var(--green); color:var(--accent-ink); padding:10px 16px; border-radius:10px; font-size:14px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:50}
  .toast.show{opacity:1; transform:translate(-50%, 0)}

/* ---------- Adições da versão com painel ---------- */
.logo img{flex:none; display:block}
.post.feature .feature-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.45}
.cover .cover-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.btn.is-disabled{opacity:.75; color:var(--ink-2); cursor:not-allowed; pointer-events:none}
.post[hidden]{display:none!important}
.posts-3{grid-template-columns:repeat(3, 1fr)}
@media (max-width:900px){ .posts-3{grid-template-columns:1fr} }

/* Página de artigo */
.article{padding-block:clamp(40px, 6vw, 80px) 24px}
.article .wrap{max-width:calc(760px + 2 * var(--gutter))}
.article .back{display:inline-block; text-decoration:none; color:var(--ink-2); font-size:14px; margin-bottom:28px}
.article .back:hover{color:var(--cyan)}
.article .meta{display:flex; flex-wrap:wrap; gap:4px 10px; font-family:var(--mono); font-size:13px; color:var(--ink-2); text-transform:uppercase; letter-spacing:.06em}
.article h1{font-size:clamp(32px, 4.4vw, 54px); font-weight:700; margin-top:14px}
.article .lede{font-size:clamp(18px, 1.5vw, 21px); color:var(--ink-2); margin-top:18px}
.article-cover{display:block; width:100%; border-radius:16px; margin-top:32px; border:1px solid var(--line)}
.draft-note{background:rgba(255,196,0,.12); color:#FFD76A; border:1px solid rgba(255,196,0,.3); padding:10px 14px; border-radius:10px; font-size:14px; margin-bottom:20px}
.prose{margin-top:36px; font-size:18px; line-height:1.75; color:#E6EBF1}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:28px; font-weight:700; margin-top:1.8em; color:var(--ink)}
.prose h3{font-size:22px; font-weight:700; margin-top:1.6em; color:var(--ink)}
.prose a{color:var(--cyan); text-underline-offset:3px}
.prose strong{color:var(--ink)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.4em}
.prose li::marker{color:var(--green)}
.prose blockquote{margin-left:0; padding:4px 0 4px 20px; border-left:3px solid var(--cyan); color:var(--ink-2)}
.prose code{font-family:var(--mono); font-size:.88em; background:var(--surface-2); padding:2px 6px; border-radius:5px}
.prose pre{background:var(--term-bg); border:1px solid var(--line); border-radius:12px; padding:18px; overflow-x:auto}
.prose pre code{background:none; padding:0}
.prose img{border-radius:12px}
.prose table{border-collapse:collapse; width:100%; font-size:16px; display:block; overflow-x:auto}
.prose th,.prose td{border-bottom:1px solid var(--line); padding:10px 12px; text-align:left}
.post:not(.feature) canvas,.post:not(.feature) .feature-img{display:none}

/* ---------- Menu do celular ---------- */
.menu-btn{display:none; align-items:center; justify-content:center; width:44px; height:44px; margin-left:4px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer}
.menu-btn svg{display:block}
.menu-btn .x{display:none}
.top.open .menu-btn .x{display:block}
.top.open .menu-btn .bars{display:none}
@media (max-width:820px){
  .menu-btn{display:inline-flex}
  .top .btn-sm{margin-left:auto}
  .nav{position:absolute; left:0; right:0; top:100%; flex-direction:column; gap:0; margin:0;
       background:var(--bg); border-bottom:1px solid var(--line); padding:8px var(--gutter) 16px; box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}
  .top.open .nav{display:flex}
  .nav a{font-size:17px; color:var(--ink); padding:14px 4px; border-radius:0; border-bottom:1px solid var(--line)}
  .nav a:last-child{border-bottom:0}
  .top .wrap{position:relative}
}
@media (max-width:420px){ .top .btn-sm{display:none} .menu-btn{margin-left:auto} }

/* ---------- Ajustes de leitura e toque no celular ---------- */
@media (max-width:640px){
  html body{font-size:16px}
  .hero{padding-block:32px 40px}
  .hero h1{font-size:clamp(34px, 10vw, 44px)}
  .hero .lede{font-size:17px; color:var(--ink)}
  .hero .ctas{flex-direction:column; align-items:stretch}
  .hero .ctas .btn{padding-block:15px; font-size:16px}
  .hero .facts{font-size:15px; color:var(--ink)}
  .sec-head h2{font-size:30px}
  .sec-head p{font-size:16px}
  section.block{padding-block:48px}
  .term-body{font-size:14px; min-height:0; padding:18px 16px}
  .term-btn{min-height:40px; padding:0 14px}
  .chips{flex-wrap:nowrap; overflow-x:auto; margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); scrollbar-width:none; width:calc(100% + 2 * var(--gutter))}
  .chips::-webkit-scrollbar{display:none}
  .chip{min-height:40px; padding:0 16px; flex:none; font-size:15px; color:var(--ink)}
  .post{padding-top:16px}
  .post h3{font-size:20px}
  .post p,.freebie p,.pbody p,.step p{font-size:16px}
  .post.feature{min-height:300px; padding:22px}
  .freebie,.pbody,.step{padding:20px}
  .freebie ul,.pbody ul{font-size:15px}
  .btn{min-height:48px}
  .news{padding:24px 20px; border-radius:18px}
  .news .row{flex-direction:column}
  .news input{flex:none; width:100%}
  .news .btn{width:100%}
  .news small{font-size:14px}
  .faq summary{font-size:18px; padding-block:6px}
  .faq details p{font-size:16px}
  .price .inst{font-size:14px}
  .secure{font-size:14px; align-items:flex-start; text-align:left}
  footer .cols a{padding-block:10px; font-size:15px}
  footer .cols div{gap:0}
  .logo{min-height:44px}
  .badge{font-size:13px}
  footer .legal{font-size:13px}
  .prose{font-size:17px}
  .article .back{padding-block:10px}
}

/* Âncoras não ficam escondidas atrás do cabeçalho fixo */
section[id]{scroll-margin-top:72px}
@media (max-width:640px){ .post.feature canvas{opacity:.4} }

/* Destaque com capa: imagem inteira no topo do card, texto abaixo */
.post.feature.has-cover{justify-content:flex-start; min-height:0; gap:14px; padding:14px 14px 28px}
.post.feature.has-cover .feature-img{position:static; display:block; width:100%; aspect-ratio:1600/840; height:auto; object-fit:cover; opacity:1; border-radius:12px; margin-bottom:8px}
.post.feature.has-cover > *:not(img){margin-inline:14px}
@media (max-width:640px){ .post.feature.has-cover{padding:10px 10px 22px} .post.feature.has-cover > *:not(img){margin-inline:10px} }