/* ════════════════════════════════════════════
   RUK BLOG v3 — design moderno
   Ink #16091a · Plum #824188 · Lilac #c98fd1
   Montserrat (display) + Inter (corpo)
════════════════════════════════════════════ */

:root {
  --ink:        #16091a;
  --ink-soft:   #241028;
  --plum:       #824188;
  --plum-deep:  #5c2d62;
  --orchid:     #a65aad;
  --lilac:      #c98fd1;
  --paper:      #faf8fc;
  --card:       #ffffff;
  --text:       #1d1022;
  --text2:      #574a5c;
  --text3:      #9a8da0;
  --line:       #ece5f0;
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px;
  --sh-sm: 0 2px 14px rgba(92,45,98,.07);
  --sh-md: 0 10px 40px rgba(92,45,98,.13);
  --sh-glow: 0 0 0 1px rgba(130,65,136,.25), 0 8px 40px rgba(130,65,136,.25);
  --tr: all .25s cubic-bezier(.4,0,.2,1);
  --fh: 'Montserrat', sans-serif;
  --fb: 'Inter', sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--paper);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── BOTÕES ── */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--fh);font-weight:700;border:none;transition:var(--tr)}
.btn--pill{font-size:.78rem;background:var(--plum);color:#fff;padding:9px 20px;border-radius:100px;white-space:nowrap}
.btn--pill:hover{background:var(--plum-deep);transform:translateY(-1px);box-shadow:0 4px 18px rgba(130,65,136,.35)}
.btn--glow{font-size:.85rem;background:#fff;color:var(--ink);padding:12px 24px;border-radius:100px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 8px 32px rgba(201,143,209,.35)}
.btn--glow:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.2),0 14px 44px rgba(201,143,209,.5)}
.btn--glow span{transition:var(--tr)}
.btn--glow:hover span{transform:translateX(4px)}
.btn--light{font-size:.82rem;background:#fff;color:var(--plum);padding:12px 24px;border-radius:100px}
.btn--light:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(0,0,0,.18)}

/* ── HEADER ── */
.hd{position:sticky;top:0;z-index:100;background:rgba(250,248,252,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.hd__in{display:flex;align-items:center;gap:32px;height:64px}
.logo{display:flex;align-items:baseline;gap:3px;font-family:var(--fh);font-size:1.4rem;font-weight:900;letter-spacing:-.5px}
.logo img{max-height:38px;width:auto;display:block;align-self:center}
.ft .logo img{max-height:34px}

/* Redes sociais */
.social{display:flex;gap:10px;margin-top:14px}
.social a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.65);transition:var(--tr)}
.social a:hover{background:var(--plum);color:#fff;border-color:var(--plum);transform:translateY(-2px)}
.social svg{width:16px;height:16px;fill:currentColor}
.logo__r{color:var(--plum)}
.logo__r--lt{color:var(--lilac)}
.logo__b{color:var(--text3);font-weight:500;font-size:.95rem}
.hd__nav{display:flex;gap:26px;margin-left:auto}
.hd__nav a{font-family:var(--fh);font-size:.8rem;font-weight:600;color:var(--text2);padding:4px 0;position:relative}
.hd__nav a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:linear-gradient(90deg,var(--plum),var(--lilac));border-radius:2px;transition:var(--tr)}
.hd__nav a:hover{color:var(--plum)}
.hd__nav a:hover::after{width:100%}
.hd__burger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:6px;margin-left:auto}
.hd__burger span{width:22px;height:2px;background:var(--plum);border-radius:2px;transition:var(--tr)}

/* ── HERO ── */
.hero{background:var(--ink);position:relative;overflow:hidden;padding:88px 0 80px;color:#fff}

/* Imagem de fundo opcional: defina --hero-img no elemento .hero
   Ex: <section class="hero hero--img" style="--hero-img:url('images/capa.jpg')"> */
/* Imagem de fundo: cobre TODA a extensão do banner.
   Medida recomendada: 1920×900px (mín. 1600×750), JPG/WebP otimizado */
.hero--img{background-image:var(--hero-img);background-size:cover;background-position:center;min-height:480px;display:flex;align-items:center}
.hero--img::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(22,9,26,.92) 0%,rgba(22,9,26,.72) 48%,rgba(22,9,26,.35) 100%);z-index:0}
.hero--img .hero__mesh{opacity:.45}
.hero--img .hero__in{grid-template-columns:1fr}
.hero--img .hero__visual{display:none}
.hero--img .hero__title{max-width:740px}

.hero__mesh{position:absolute;inset:-40%;background:
  radial-gradient(38% 42% at 28% 32%, rgba(130,65,136,.55) 0%, transparent 70%),
  radial-gradient(30% 36% at 70% 64%, rgba(166,90,173,.4) 0%, transparent 70%),
  radial-gradient(26% 30% at 84% 22%, rgba(201,143,209,.3) 0%, transparent 70%);
  filter:blur(40px);animation:drift 18s ease-in-out infinite alternate;pointer-events:none}
@keyframes drift{
  0%{transform:translate(0,0) rotate(0deg)}
  100%{transform:translate(4%,-3%) rotate(4deg)}
}
.hero__grain{position:absolute;inset:0;opacity:.5;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);background-size:3px 3px}
.hero__in{display:grid;grid-template-columns:1.25fr .75fr;gap:64px;align-items:center;position:relative;z-index:1}
.hero__content{display:flex;flex-direction:column;gap:22px}
.hero__eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--fh);font-size:.7rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--lilac);width:fit-content}
.hero__pulse{width:8px;height:8px;border-radius:50%;background:var(--lilac);box-shadow:0 0 0 0 rgba(201,143,209,.6);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(201,143,209,.55)}
  70%{box-shadow:0 0 0 10px rgba(201,143,209,0)}
  100%{box-shadow:0 0 0 0 rgba(201,143,209,0)}
}
.hero__title{font-family:var(--fh);font-size:clamp(1.9rem,3.6vw,3rem);font-weight:800;line-height:1.14;letter-spacing:-1.2px;max-width:620px}
.hero__title a{color:#fff;transition:var(--tr)}
.hero__title a:hover{color:var(--lilac)}
.hero__title em{font-style:normal;background:linear-gradient(95deg,var(--lilac) 0%,var(--orchid) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__desc{font-size:1.02rem;font-weight:300;color:rgba(255,255,255,.66);line-height:1.75;max-width:520px}
.hero__meta{display:flex;align-items:center;gap:14px;margin-top:6px;flex-wrap:wrap}
.hero__avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--plum),var(--orchid));display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-weight:800;font-size:.9rem;flex-shrink:0;border:2px solid rgba(255,255,255,.25)}
.hero__byline{margin-right:auto}
.hero__byline strong{display:block;font-family:var(--fh);font-size:.84rem;font-weight:700}
.hero__byline span{font-size:.76rem;color:rgba(255,255,255,.5)}

/* hero stat card */
.hero__visual{display:block}
.hero__card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:var(--r-lg);padding:34px 30px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 24px 80px rgba(0,0,0,.4);transition:var(--tr)}
.hero__visual:hover .hero__card{transform:translateY(-4px) rotate(.4deg);border-color:rgba(201,143,209,.4)}
.hero__card-row{display:flex;align-items:center;gap:8px;font-family:var(--fh);font-size:.72rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:18px}
.dot{width:9px;height:9px;border-radius:50%}
.dot--g{background:#4ade80;box-shadow:0 0 12px rgba(74,222,128,.7)}
.hero__card-big{font-family:var(--fh);font-size:3.2rem;font-weight:900;letter-spacing:-2px;line-height:1;background:linear-gradient(95deg,#fff 30%,var(--lilac));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__card-sub{font-size:.8rem;color:rgba(255,255,255,.5);margin:10px 0 22px}
.hero__card-bar{height:7px;border-radius:100px;background:rgba(255,255,255,.1);overflow:hidden}
.hero__card-bar i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--plum),var(--lilac));animation:fill 1.6s cubic-bezier(.4,0,.2,1) both .3s}
@keyframes fill{from{width:0!important}}
.hero__card-foot{font-family:var(--fh);font-size:.74rem;font-weight:700;color:var(--lilac);margin-top:10px}

/* ── MAIN ── */
.main{padding:72px 24px 88px}

.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:26px}
.sec-title{font-family:var(--fh);font-size:1.35rem;font-weight:800;letter-spacing:-.6px}
.sec-link{font-family:var(--fh);font-size:.78rem;font-weight:700;color:var(--plum)}
.sec-link:hover{letter-spacing:.3px}

/* ── BENTO ── */
.feat{margin-bottom:72px}
.bento{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto;gap:20px}
.bcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;position:relative;transition:var(--tr)}
.bcard::before{content:'';position:absolute;inset:0;border-radius:var(--r-md);padding:1px;background:linear-gradient(135deg,var(--plum),var(--lilac));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:var(--tr);pointer-events:none}
.bcard:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.bcard:hover::before{opacity:1}
.bcard--lg{grid-row:span 2}
.bcard__media{position:relative;display:block;overflow:hidden}
.bcard__ph{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;transition:transform .5s}
.bcard--lg .bcard__ph{aspect-ratio:16/10}
.bcard__media--sm .bcard__ph{aspect-ratio:21/9}
.bcard:hover .bcard__ph{transform:scale(1.04)}
.bcard__ph--juri{background:linear-gradient(135deg,#3d1a44,var(--plum-deep))}
.bcard__ph--rh{background:linear-gradient(135deg,var(--plum-deep),var(--plum))}
.bcard__ph--auto{background:linear-gradient(135deg,var(--plum),var(--orchid))}
.chip{position:absolute;top:14px;left:14px;font-family:var(--fh);font-size:.64rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:rgba(255,255,255,.92);color:var(--plum-deep);padding:5px 12px;border-radius:100px;backdrop-filter:blur(6px)}
.bcard__body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.bcard__body h3{font-family:var(--fh);font-size:1.02rem;font-weight:700;line-height:1.35;letter-spacing:-.3px}
.bcard--lg .bcard__body h3{font-size:1.25rem}
.bcard__body h3 a:hover{color:var(--plum)}
.bcard__body p{font-size:.85rem;color:var(--text2);line-height:1.65;flex:1}
.bcard__foot{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--line);margin-top:auto;font-size:.74rem;color:var(--text3)}
.rt{font-family:var(--fh);font-weight:700;color:var(--plum);background:rgba(130,65,136,.08);padding:2px 10px;border-radius:100px;font-size:.68rem}

/* ── COLS ── */
.cols{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start}

/* ── FILTER ── */
.filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.filter__b{font-family:var(--fh);font-size:.76rem;font-weight:600;padding:8px 17px;border-radius:100px;border:1.5px solid var(--line);background:#fff;color:var(--text2);transition:var(--tr)}
.filter__b:hover{border-color:var(--plum);color:var(--plum)}
.filter__b.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ── FEED ── */
.feed__list{display:flex;flex-direction:column;gap:14px}
.pitem{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:22px 24px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;cursor:pointer;position:relative;transition:var(--tr)}
.pitem::after{content:'→';position:absolute;right:24px;top:50%;transform:translate(8px,-50%);opacity:0;font-family:var(--fh);font-weight:800;font-size:1.1rem;color:var(--plum);transition:var(--tr)}
.pitem:hover{border-color:var(--plum);box-shadow:var(--sh-sm);transform:translateX(3px)}
.pitem:hover::after{opacity:1;transform:translate(0,-50%)}
.pitem__tag{font-family:var(--fh);font-size:.64rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--plum);margin-bottom:6px;display:block}
.pitem__title{font-family:var(--fh);font-size:1rem;font-weight:700;line-height:1.4;letter-spacing:-.2px;margin-bottom:6px}
.pitem__exc{font-size:.84rem;color:var(--text2);line-height:1.6;margin-bottom:10px}
.pitem__meta{font-size:.73rem;color:var(--text3)}
.pitem__meta .sep{margin:0 6px}
.pitem__num{font-family:var(--fh);font-size:2.2rem;font-weight:900;color:var(--line);letter-spacing:-2px;padding-right:24px;transition:var(--tr)}
.pitem:hover .pitem__num{color:rgba(130,65,136,.25)}
.feed__empty{padding:56px 24px;text-align:center;color:var(--text3);font-size:.9rem}

/* ── PAGER ── */
.pager{display:flex;gap:8px;margin-top:28px}
.pager button{font-family:var(--fh);font-size:.8rem;font-weight:700;min-width:38px;height:38px;padding:0 12px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:#fff;color:var(--text2);transition:var(--tr)}
.pager button:hover,.pager button.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ── SIDEBAR ── */
.side{display:flex;flex-direction:column;gap:20px;position:sticky;top:84px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:22px}
.panel__t{font-family:var(--fh);font-size:.72rem;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--text2);margin-bottom:16px;display:flex;align-items:center;gap:10px}
.panel__t::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--plum),transparent)}

.search{position:relative}
.search input{width:100%;padding:11px 40px 11px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);font-family:var(--fb);font-size:.84rem;background:var(--paper);outline:none;transition:var(--tr)}
.search input:focus{border-color:var(--plum);background:#fff;box-shadow:0 0 0 3px rgba(130,65,136,.1)}
.search svg{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--text3);pointer-events:none}
.search__res{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.search__hit{display:block;padding:10px 12px;border-radius:var(--r-sm);background:rgba(130,65,136,.06);border-left:3px solid var(--plum);transition:var(--tr)}
.search__hit:hover{background:rgba(130,65,136,.12)}
.search__hit strong{display:block;font-family:var(--fh);font-size:.78rem;font-weight:600;margin-bottom:2px}
.search__hit span{font-size:.7rem;color:var(--text3)}
.search__hit mark{background:rgba(201,143,209,.35);color:var(--plum-deep);border-radius:2px;padding:0 2px}

.arch{list-style:none;display:flex;flex-direction:column;gap:2px}
.arch li{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:var(--r-sm);font-size:.84rem;color:var(--text2);cursor:pointer;transition:var(--tr)}
.arch li:hover{background:rgba(130,65,136,.07);color:var(--plum)}
.arch li b{font-family:var(--fh);font-size:.68rem;font-weight:700;background:rgba(130,65,136,.09);color:var(--plum);padding:2px 9px;border-radius:100px}

.cats{display:flex;flex-wrap:wrap;gap:8px}
.cats button{font-family:var(--fh);font-size:.72rem;font-weight:600;padding:6px 13px;border-radius:100px;background:rgba(130,65,136,.07);color:var(--plum);border:none;transition:var(--tr)}
.cats button:hover{background:var(--plum);color:#fff}

.panel--cta{background:var(--ink);border:none;color:#fff;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;position:relative;overflow:hidden;padding:30px 24px}
.panel--cta__orb{position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(166,90,173,.5),transparent 70%);top:-80px;right:-60px;filter:blur(20px);pointer-events:none}
.panel--cta h4{font-family:var(--fh);font-size:1rem;font-weight:800;line-height:1.4;position:relative}
.panel--cta p{font-size:.8rem;color:rgba(255,255,255,.6);line-height:1.6;position:relative}
.panel--cta .btn{position:relative;margin-top:4px}

/* ── NEWSLETTER ── */
.nl{background:var(--ink);position:relative;overflow:hidden;padding:64px 0;color:#fff}
.nl__mesh{position:absolute;inset:-30%;background:radial-gradient(40% 50% at 70% 50%,rgba(130,65,136,.45),transparent 70%);filter:blur(40px);pointer-events:none}
.nl__in{display:flex;align-items:center;justify-content:space-between;gap:48px;position:relative;flex-wrap:wrap}
.nl h3{font-family:var(--fh);font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:800;letter-spacing:-.5px;margin-bottom:6px}
.nl p{font-size:.9rem;color:rgba(255,255,255,.6)}
.nl__form{display:flex;gap:10px;flex-wrap:wrap}
.nl__form input{width:280px;padding:13px 18px;border:1.5px solid rgba(255,255,255,.2);border-radius:100px;background:rgba(255,255,255,.08);color:#fff;font-size:.86rem;outline:none;transition:var(--tr)}
.nl__form input::placeholder{color:rgba(255,255,255,.4)}
.nl__form input:focus{background:rgba(255,255,255,.14);border-color:var(--lilac)}

/* ── FOOTER ── */
.ft{background:#0e060f;color:#fff;padding:56px 0 0}
.ft__in{display:grid;grid-template-columns:1fr 2fr;gap:64px;padding-bottom:44px}
.ft__brand p{margin-top:10px;font-size:.82rem;color:rgba(255,255,255,.35)}
.ft__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.ft__cols>div{display:flex;flex-direction:column;gap:10px}
.ft__cols strong{font-family:var(--fh);font-size:.68rem;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:4px}
.ft__cols a{font-size:.82rem;color:rgba(255,255,255,.6);transition:var(--tr)}
.ft__cols a:hover{color:var(--lilac)}
.ft__bot{border-top:1px solid rgba(255,255,255,.07);padding:18px 24px;text-align:center}
.ft__bot p{font-size:.74rem;color:rgba(255,255,255,.28)}

/* ── TOAST ── */
.toast{position:fixed;bottom:28px;right:28px;background:var(--ink);color:#fff;padding:13px 22px;border-radius:var(--r-md);font-family:var(--fh);font-size:.82rem;font-weight:600;border:1px solid rgba(201,143,209,.3);box-shadow:0 12px 48px rgba(0,0,0,.3);z-index:9999;opacity:0;transform:translateY(12px);transition:var(--tr);pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}

/* ── RESPONSIVO ── */
@media (max-width:1024px){
  .hero__in{grid-template-columns:1fr}
  .hero__visual{display:none}
  .bento{grid-template-columns:1fr 1fr}
  .bcard--lg{grid-column:span 2;grid-row:auto}
  .cols{grid-template-columns:1fr}
  .side{position:static}
}
@media (max-width:768px){
  .hd__nav,.hd .btn--pill{display:none}
  .hd__burger{display:flex}
  .hd__nav.open{display:flex;flex-direction:column;position:absolute;top:64px;left:0;right:0;background:#fff;padding:18px 24px;gap:14px;box-shadow:0 12px 32px rgba(0,0,0,.12)}
  .bento{grid-template-columns:1fr}
  .bcard--lg{grid-column:auto}
  .nl__in{flex-direction:column;align-items:flex-start}
  .nl__form{width:100%}
  .nl__form input{flex:1;width:auto}
  .ft__in{grid-template-columns:1fr;gap:32px}
  .ft__cols{grid-template-columns:1fr 1fr}
  .pitem{grid-template-columns:1fr}
  .pitem__num{display:none}
}
@media (max-width:480px){
  .hero{padding:56px 0 48px}
  .ft__cols{grid-template-columns:1fr}
}