:root{
  --bg:#0B1020;
  --bg2:#070A14;
  --ink:#EAF0FF;
  --muted:rgba(234,240,255,.72);

  --p1:#A855F7;  /* roxo */
  --p2:#6366F1;  /* azul */
  --p3:#22D3EE;  /* ciano de acento */
  --stroke:rgba(255,255,255,.10);
  --glass:rgba(255,255,255,.06);
  --glass2:rgba(255,255,255,.10);
  --shadow: 0 18px 60px rgba(0,0,0,.50);

  --r:18px;
}

*{box-sizing:border-box}

/* ✅ CORREÇÃO DO “CORTE” DO FUNDO */
html,body{min-height:100%}

/* ✅ deixa o FUNDO infinito preso no html (sem faixa no scroll) */
html{
  background: radial-gradient(1200px 800px at 20% 10%, rgba(168,85,247,.18), transparent 55%),
              radial-gradient(1100px 900px at 90% 20%, rgba(99,102,241,.16), transparent 55%),
              radial-gradient(1000px 900px at 55% 90%, rgba(34,211,238,.10), transparent 55%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  background-attachment: scroll;
}

body{
  margin:0;
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  /* ✅ remove o background do body pra não “trocar” no meio do scroll */
  background: transparent;
  color: var(--ink);
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
.muted{color:var(--muted)}

.bg-effects{position:fixed; inset:0; pointer-events:none; z-index:-1}
.blob{
  position:absolute; filter: blur(40px);
  opacity:.9; border-radius:999px;
  transform: translateZ(0);
  animation: floaty 10s ease-in-out infinite;
}
.blob-a{
  width:520px;height:520px;
  left:-140px; top:-120px;
  background: radial-gradient(circle at 30% 30%, rgba(168,85,247,.85), rgba(99,102,241,.10) 60%, transparent 70%);
}
.blob-b{
  width:620px;height:620px;
  right:-220px; top:40px;
  background: radial-gradient(circle at 40% 40%, rgba(99,102,241,.80), rgba(34,211,238,.12) 60%, transparent 72%);
  animation-delay:-2.6s;
}
.blob-c{
  width:520px;height:520px;
  left:40%; bottom:-260px;
  background: radial-gradient(circle at 40% 40%, rgba(34,211,238,.45), rgba(168,85,247,.12) 55%, transparent 72%);
  animation-delay:-4.2s;
}
@keyframes floaty{
  0%,100%{transform: translate3d(0,0,0) scale(1)}
  50%{transform: translate3d(0,22px,0) scale(1.02)}
}

.grid{
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 30%, black 30%, transparent 70%);
  opacity:.18;
}

.noise{
  position:absolute; inset:-200px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  opacity:.10;
  mix-blend-mode: overlay;
  transform: rotate(6deg);
}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(10,12,24,.78), rgba(10,12,24,.28));
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand{display:flex; align-items:center; gap:10px}
.brand-dot{
  width:12px;height:12px;border-radius:99px;
  background: radial-gradient(circle at 30% 30%, var(--p1), var(--p2));
  box-shadow: 0 0 0 6px rgba(168,85,247,.12);
}
.brand-tag{
  margin-left:8px;
  padding:6px 10px;
  font-size:12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.78);
}

.topnav{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.navlink{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid transparent;
  color: rgba(234,240,255,.82);
}
.navlink:hover{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.navlink.active{
  border-color: rgba(168,85,247,.25);
  background: linear-gradient(90deg, rgba(168,85,247,.16), rgba(99,102,241,.12));
}

.container{max-width:1120px; margin:0 auto; padding: 26px 18px 60px}

.hero{
  padding: 34px 0 22px;
  text-align:center;
}
.hero-badge{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.82);
  font-size:13px;
}
.hero-title{
  margin: 16px auto 0;
  font-weight: 800;
  font-size: clamp(34px, 4.2vw, 64px);
  line-height:1.02;
  letter-spacing:-.02em;
  text-shadow: 0 10px 40px rgba(0,0,0,.45);
}
.hero-sub{
  margin: 14px auto 0;
  max-width: 780px;
  color: rgba(234,240,255,.76);
  font-size: 16px;
  line-height:1.6;
}

.search-wrap{margin: 22px auto 0; max-width: 820px; position:relative}
.search-pill{
  display:flex; align-items:center; gap:10px;
  padding: 12px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow);
}
.search-pill:focus-within{
  border-color: rgba(168,85,247,.38);
  box-shadow: 0 18px 70px rgba(0,0,0,.60), 0 0 0 6px rgba(168,85,247,.10);
}
.search-icon{opacity:.85; font-size:18px; padding:0 6px}
.search-input{
  flex:1;
  background:transparent;
  border:0;
  outline:none;
  color: var(--ink);
  font-size:16px;
  padding: 10px 6px;
}
.search-input::placeholder{color: rgba(234,240,255,.56)}
.search-btn{
  border:0;
  padding: 11px 16px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
  color: rgba(255,255,255,.92);
  background: linear-gradient(90deg, rgba(168,85,247,.95), rgba(99,102,241,.92));
}
.search-btn:hover{filter: brightness(1.05)}

.search-hints{
  margin-top:10px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  color: rgba(234,240,255,.60);
  font-size:12px;
}
.kbd{
  padding:4px 8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.suggestions{
  position:absolute;
  left:0; right:0;
  top: 64px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,12,24,.86);
  backdrop-filter: blur(16px);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.sug-item{
  display:flex; justify-content:space-between; align-items:center;
  padding: 12px 14px;
  cursor:pointer;
  color: rgba(234,240,255,.86);
}
.sug-item:hover, .sug-item.active{
  background: linear-gradient(90deg, rgba(168,85,247,.18), rgba(99,102,241,.10));
}
.sug-kind{
  font-size:12px;
  color: rgba(234,240,255,.58);
}

.section{margin-top: 26px}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
.section-head h2{margin:0; font-size:20px}
.section-actions{display:flex; gap:10px; flex-wrap:wrap}

.chip{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.82);
  border-radius:999px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:700;
}
.chip:hover{background: rgba(255,255,255,.06)}
.chip-on{
  border-color: rgba(168,85,247,.28);
  background: linear-gradient(90deg, rgba(168,85,247,.16), rgba(99,102,241,.10));
}

.results-meta{margin-top:10px; color: rgba(234,240,255,.62); font-size:13px}

.cards{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.card{
  grid-column: span 6;
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  overflow:hidden;
  box-shadow: 0 14px 50px rgba(0,0,0,.35);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  position:relative;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(168,85,247,.22);
  background: rgba(255,255,255,.06);
}
.card::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(600px 220px at 20% 0%, rgba(168,85,247,.16), transparent 60%);
  pointer-events:none;
}
.card-inner{position:relative; padding:16px}
.card-title{margin:0; font-weight:800; letter-spacing:-.01em; font-size:18px}
.card-excerpt{margin:10px 0 0; color: rgba(234,240,255,.72); line-height:1.55}
.card-meta{display:flex; gap:8px; flex-wrap:wrap; margin-top: 12px}
.pill{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.72);
  font-size:12px;
}
.pill.ghost{background: transparent}

.tag-cloud{display:flex; flex-wrap:wrap; gap:10px; margin-top: 12px}
.tag{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  color: rgba(234,240,255,.82);
  font-weight:700;
}
.tag:hover{
  border-color: rgba(34,211,238,.22);
  background: linear-gradient(90deg, rgba(34,211,238,.10), rgba(168,85,247,.10));
}

.footer{margin-top: 42px}
.footer-inner{
  display:flex; justify-content:space-between; align-items:center;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.10);
}
.footer-title{font-weight:800}

.post{
  margin-top: 18px;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.post-cover{
  height: 260px;
  background-size: cover;
  background-position: center;
  position:relative;
}
.post-cover::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent, rgba(7,10,20,.82));
}
.post-head{padding: 18px 18px 10px}
.post-title{
  margin: 10px 0 0;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height:1.06;
  letter-spacing:-.02em;
  font-weight:800;
}
.post-excerpt{margin: 12px 0 0; color: rgba(234,240,255,.76); line-height:1.65}
.post-meta{display:flex; gap:10px; flex-wrap:wrap}
.post-tags{display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px}

.post-body{
  padding: 10px 18px 20px;
  color: rgba(234,240,255,.88);
  line-height:1.75;
}
.post-body h2, .post-body h3{margin-top: 24px}
.post-body a{
  color: rgba(34,211,238,.95);
  text-decoration: underline;
  text-decoration-color: rgba(34,211,238,.35);
}
.post-body blockquote{
  margin: 18px 0;
  padding: 12px 14px;
  border-left: 3px solid rgba(168,85,247,.55);
  background: rgba(168,85,247,.08);
  border-radius: 14px;
}
.post-end{padding: 16px 18px; border-top: 1px solid rgba(255,255,255,.10)}

.btn-ghost{
  display:inline-flex; justify-content:center; align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  font-weight:800;
}
.btn-ghost:hover{background: rgba(255,255,255,.06)}

@media (max-width: 860px){
  .card{grid-column: span 12}
  .brand-tag{display:none}
}

/* ===== CAPA DO CARD (imagem do post na home) ===== */
.card-cover{
  height: 190px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  position: relative;
}

.card-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform .25s ease, filter .25s ease;
  filter: saturate(1.05) contrast(1.05);
}

.card:hover .card-cover img{
  transform: scale(1.06);
}

/* placeholder quando não tem imagem */
.card-cover--placeholder{
  background:
    radial-gradient(420px 180px at 20% 20%, rgba(168,85,247,.35), transparent 60%),
    radial-gradient(420px 180px at 80% 30%, rgba(99,102,241,.30), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.card-cover--placeholder::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.8s ease-in-out infinite;
  opacity:.35;
}
@keyframes shimmer{
  0%{transform: translateX(-100%)}
  100%{transform: translateX(100%)}
}

/* ===== VÍDEO/PLAYER NO POST ===== */
.post-media{
  padding: 0 18px 14px;
}

.video-wrap{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.video-wrap video,
.video-wrap iframe{
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* ===== HOME do blog: background desktop/mobile (sem quebrar o resto) ===== */

/* DESKTOP */
.blog-home .bg-effects::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("../img/bg-home-desktop.jpg") center right / cover no-repeat;
  opacity: .95;
  transform: translateZ(0);
}

/* mobile troca a imagem */
@media (max-width: 767px){
  .blog-home .bg-effects::before{
    background-image: url("../img/bg-home-mobile.jpg");
    background-size: contain;
    background-position: center top;
    background-color: #0B1020;
  }
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-logo{
  height: 28px;
  width: auto;
  display:block;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.35));
}

@media (max-width: 860px){
  .brand-logo{ height: 24px; }
}

/* se você ainda tiver o dot no HTML em algum lugar, mata ele sem dó */
.brand-dot{ display:none; }

/* ===== HEADER 100% CENTRALIZADO (logo + links) ===== */
.topbar{
  display: flex !important;
  align-items: center;
  justify-content: center !important;
  gap: 14px;
  flex-wrap: wrap;
  text-align: center;
}

/* garante que logo e menu também centralizem */
.topbar .brand{
  display:flex;
  align-items:center;
  justify-content:center;
}

.topbar .topnav{
  display:flex;
  justify-content:center !important;
  align-items:center;
  flex-wrap: wrap;
  gap: 10px;
}

/* aumenta só um pouco a logo */
.topbar .brand img.brand-logo{
  height: 30px;
  width: auto !important;
  max-width: 220px;
  display:block;
  object-fit: contain;
}

/* mobile: empilha logo em cima e menu embaixo, tudo central */
@media (max-width: 860px){
  .topbar{
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
  }
  .topbar .brand img.brand-logo{
    height: 26px;
    max-width: 200px;
  }
}

/* (se quiser o fundo “liso” sem grade) */
.grid{ display:none !important; }

/* ===== HOME CARDS: vidro mais fosco (blur maior) ===== */
.cards .card{
  background: rgba(255,255,255,.045);          /* vidro mais “leitoso” */
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(22px) saturate(1.15);  /* ✅ mais fosco */
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
}

/* brilho interno mais suave e espalhado */
.cards .card::before{
  background: radial-gradient(800px 320px at 18% 0%,
    rgba(168,85,247,.14),
    rgba(99,102,241,.08) 45%,
    transparent 70%);
  opacity: .95;
}

/* reforça “frost” sem virar neblina */
.cards .card-inner{
  background: linear-gradient(180deg,
    rgba(255,255,255,.03),
    rgba(255,255,255,.015));
}

/* hover continua bonito, só mais “glass” */
.cards .card:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(168,85,247,.26);
  backdrop-filter: blur(26px) saturate(1.2);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);
}

/* ===== Rodapé social: Liquid Glass ===== */
.social-footer{
  margin-top: 46px;
  padding: 18px 0 34px;
}

.social-footer-inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 18px;
  display: grid;
  gap: 14px;
}

.social-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.glass-social{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(120% 160% at 20% 15%, rgba(255,255,255,.22), transparent 55%),
    radial-gradient(120% 160% at 80% 25%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(135deg, rgba(168,85,247,.28), rgba(99,102,241,.20));
  box-shadow:
    0 16px 44px rgba(0,0,0,.35),
    0 0 0 1px rgba(0,0,0,.18) inset,
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 10px 40px rgba(168,85,247,.35);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  position: relative;
  overflow: hidden;
}

.glass-social::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(110deg,
      transparent 0%,
      rgba(255,255,255,.22) 35%,
      rgba(255,255,255,.10) 50%,
      transparent 70%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  pointer-events:none;
  mix-blend-mode: screen;
}

.glass-social::after{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  pointer-events:none;
}

.glass-social:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.28);
  box-shadow:
    0 18px 56px rgba(0,0,0,.40),
    0 0 0 1px rgba(0,0,0,.18) inset,
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 12px 60px rgba(168,85,247,.55);
}

.glass-social:hover::before{ transform: translateX(120%); }

.glass-social:active{
  transform: translateY(0) scale(.99);
}

.glass-social:focus-visible{
  outline: 2px solid rgba(168,85,247,.95);
  outline-offset: 3px;
}

.glass-social .ico{
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  font-size: 12px;
  font-weight: 900;
}

.social-links{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: rgba(234,240,255,.72);
}

.privacy-link{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
  padding: 4px 8px;
  border-radius: 10px;
  border: 1px solid transparent;
}

.privacy-link:hover{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}

.social-links .dot{ opacity: .55; }