@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

.rvb{
  --bg:#0B0A18; --panel:#100E24; --panel-2:#15122E;
  --violet:#5B3CF0; --violet-lt:#9B87F5; --green:#2FBF64; --blue:#7EC8FF;
  --text:#fff; --ink:#DAD8EE; --muted:#A9A6C4; --dim:#6E6A8C;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.14);
  --font:'Poppins',system-ui,sans-serif; --mono:'IBM Plex Mono',monospace;
  --max:1240px; --read:760px; --pad:clamp(20px,5vw,64px);
  background:var(--bg); color:var(--text);
  font-family:var(--font); line-height:1.6;
  overflow-x:clip; -webkit-font-smoothing:antialiased; position:relative;
}
.rvb *{box-sizing:border-box; margin:0; padding:0}
.rvb img{max-width:100%; display:block}
.rvb a{color:inherit; text-decoration:none}
.rvb ::selection{background:rgba(91,60,240,.4)}

.rvb::before{
  content:""; position:absolute; top:-120px; left:50%; transform:translateX(-50%);
  width:min(900px,90vw); height:520px; pointer-events:none; z-index:0;
  background:radial-gradient(60% 60% at 50% 40%, rgba(91,60,240,.28), transparent 70%); filter:blur(20px);
}
.rvb-wrap{position:relative; z-index:1; max-width:var(--max); margin:0 auto; padding:clamp(56px,9vw,120px) var(--pad) clamp(64px,10vw,140px)}

/* ===== INDEX HEADER ===== */
.rvb-eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--violet-lt); display:inline-flex; align-items:center; gap:10px}
.rvb-eyebrow::before{content:""; width:26px; height:1px; background:var(--violet-lt); opacity:.6}
.rvb-head h1{font-size:clamp(34px,6vw,68px); line-height:1.04; letter-spacing:-.02em; font-weight:700; margin:18px 0 0; max-width:16ch}
.rvb-head h1 em{font-style:normal; color:var(--violet-lt)}
.rvb-sub{color:var(--muted); font-size:clamp(15px,2vw,18px); max-width:52ch; margin-top:18px}

/* ===== FILTROS ===== */
.rvb-filters{display:flex; flex-wrap:wrap; gap:10px; margin-top:36px}
.rvb-chip{font-family:var(--mono); font-size:12.5px; letter-spacing:.02em; color:var(--muted); background:transparent; border:1px solid var(--line-2); border-radius:999px; padding:9px 16px; cursor:pointer; transition:all .22s ease}
.rvb-chip:hover{color:var(--text); border-color:var(--violet-lt); transform:translateY(-1px)}
.rvb-chip.is-active{background:var(--violet); border-color:var(--violet); color:#fff}
.rvb-chip:focus-visible{outline:2px solid var(--violet-lt); outline-offset:2px}

/* ===== FEATURED ===== */
.rvb-featured{margin-top:44px; position:relative; border-radius:22px; overflow:hidden; background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line)}
.rvb-featured::before{content:""; position:absolute; inset:0; border-radius:22px; padding:1px; pointer-events:none;
  background:linear-gradient(120deg, rgba(91,60,240,.9), rgba(155,135,245,.15) 40%, transparent 60%, rgba(47,191,100,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.9; background-size:200% 200%; animation:rvb-shift 9s ease infinite}
@keyframes rvb-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.rvb-featured-grid{display:grid; grid-template-columns:1.05fr 1fr; position:relative; z-index:1}
.rvb-featured .rvb-thumb{border-radius:0; min-height:100%; aspect-ratio:auto}
.rvb-featured-body{padding:clamp(26px,4vw,52px); display:flex; flex-direction:column; justify-content:center}
.rvb-featured h2{font-size:clamp(24px,3.2vw,40px); line-height:1.12; letter-spacing:-.015em; font-weight:700; margin:16px 0 0}
.rvb-featured .rvb-excerpt{margin-top:16px; font-size:clamp(15px,1.5vw,17px); max-width:46ch}
.rvb-flag{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--green)}
.rvb-dot{width:8px; height:8px; border-radius:50%; background:var(--green); animation:rvb-pulse 2.2s infinite}
@keyframes rvb-pulse{0%{box-shadow:0 0 0 0 rgba(47,191,100,.5)}70%{box-shadow:0 0 0 10px rgba(47,191,100,0)}100%{box-shadow:0 0 0 0 rgba(47,191,100,0)}}

/* ===== GRID ===== */
.rvb-grid{margin-top:26px; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); gap:22px}
.rvb-card{background:var(--panel); border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease}
.rvb-card:hover{transform:translateY(-6px); border-color:var(--violet-lt); box-shadow:0 24px 48px -24px rgba(91,60,240,.55)}
.rvb-card > a{display:flex; flex-direction:column; flex:1}
.rvb-card-body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:12px; flex:1}
.rvb-card h3{font-size:19px; line-height:1.28; letter-spacing:-.01em; font-weight:600; transition:color .25s ease}
.rvb-card:hover h3{color:var(--violet-lt)}
.rvb-excerpt{color:var(--muted); font-size:14.5px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}

/* category tag */
.rvb-tag{align-self:flex-start; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--violet-lt); background:rgba(91,60,240,.14); border:1px solid rgba(91,60,240,.3); padding:5px 10px; border-radius:6px}
.rvb-tag[data-c="Compliance"]{color:var(--green); background:rgba(47,191,100,.12); border-color:rgba(47,191,100,.3)}
.rvb-tag[data-c="AI Testing"]{color:var(--blue); background:rgba(90,170,255,.12); border-color:rgba(90,170,255,.3)}

.rvb-meta{margin-top:auto; padding-top:12px; border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-family:var(--mono); font-size:11.5px; letter-spacing:.02em; color:var(--dim)}
.rvb-meta .rvb-sep{opacity:.5}
.rvb-read{margin-left:auto; color:var(--violet-lt); display:inline-flex; align-items:center; gap:6px; transition:gap .25s ease}
.rvb-card:hover .rvb-read, .rvb-featured:hover .rvb-read{gap:11px}

/* thumb */
.rvb-thumb{position:relative; aspect-ratio:16/10; background:
    radial-gradient(120% 120% at 20% 0%, rgba(91,60,240,.35), transparent 55%),
    radial-gradient(120% 120% at 100% 100%, rgba(47,191,100,.22), transparent 55%), var(--panel-2);
  display:flex; align-items:center; justify-content:center; overflow:hidden}
.rvb-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.rvb-card:hover .rvb-thumb img, .rvb-featured:hover .rvb-thumb img{transform:scale(1.05)}
.rvb-thumb-tag{font-family:var(--mono); font-size:11px; letter-spacing:.15em; color:var(--dim); border:1px dashed var(--line-2); padding:7px 12px; border-radius:6px}

/* reveal */
.rvb-reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.rvb-reveal.rvb-in{opacity:1; transform:none}
.rvb-grid .rvb-card:nth-child(3n+1){transition-delay:.04s}
.rvb-grid .rvb-card:nth-child(3n+2){transition-delay:.10s}
.rvb-grid .rvb-card:nth-child(3n+3){transition-delay:.16s}
.rvb-card.is-hidden{display:none}

/* ============ VISTA ARTÍCULO ============ */
.rvb-articles{display:none}
.rvb.is-reading .rvb-index{display:none}
.rvb.is-reading .rvb-articles{display:block}
.rvb-article{display:none}
.rvb-article.is-open{display:block}

/* sticky article top bar */
.rvb-artbar{position:sticky; top:0; z-index:6; backdrop-filter:blur(12px); background:rgba(11,10,24,.72); border-bottom:1px solid var(--line)}
.rvb-artbar-in{max-width:var(--read); margin:0 auto; padding:14px var(--pad); display:flex; align-items:center; gap:16px}
.rvb-back{font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--muted); display:inline-flex; align-items:center; gap:8px; cursor:pointer; background:none; border:none; transition:color .2s ease}
.rvb-back:hover{color:var(--text)}
.rvb-back:focus-visible{outline:2px solid var(--violet-lt); outline-offset:3px; border-radius:4px}
.rvb-artbar .rvb-tag{margin-left:auto}
.rvb-artprog{height:2px; background:linear-gradient(90deg,var(--violet),var(--green)); width:0%; transition:width .1s linear}

.rvb-artwrap{max-width:var(--read); margin:0 auto; padding:clamp(40px,7vw,72px) var(--pad) clamp(72px,10vw,120px)}
.rvb-article-head .rvb-tag{margin-bottom:22px}
.rvb-article-head h1{font-size:clamp(30px,5vw,50px); line-height:1.08; letter-spacing:-.02em; font-weight:700}
.rvb-standfirst{color:var(--muted); font-size:clamp(18px,2.3vw,22px); line-height:1.5; margin-top:22px; font-weight:400}
.rvb-article-meta{margin-top:26px; padding-bottom:26px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:12.5px; letter-spacing:.03em; color:var(--dim); display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.rvb-hero{margin:34px 0 8px; border-radius:16px; overflow:hidden; aspect-ratio:16/9; position:relative; background:
    radial-gradient(120% 120% at 20% 0%, rgba(91,60,240,.4), transparent 55%),
    radial-gradient(120% 120% at 100% 100%, rgba(47,191,100,.25), transparent 55%), var(--panel-2);
  display:flex; align-items:center; justify-content:center}
.rvb-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* Prose wrapper. Everything INSIDE it is styled by assets/prose.css, which
   functions.php inlines here scoped to .rvb-prose and shares with the block
   editor — edit that file, not this one, for anything content-related. */
.rvb-prose{margin-top:34px; color:var(--ink); font-size:17px; line-height:1.78}
/* Plain pages (page.php: terms, privacy…) skip the article drop cap. */
.rvb-prose.is-plain p:first-child::first-letter{font-size:inherit; line-height:inherit; font-weight:inherit; float:none; padding:0; color:inherit}

/* Button — chrome as well as content (see .rvb-artfoot), so it stays here. */
.rvb-btn{font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:#fff; border:none; border-radius:999px; padding:13px 24px; cursor:pointer; background:var(--violet); display:inline-flex; align-items:center; gap:9px; transition:all .25s ease}
.rvb-btn:hover{background:#6d4dff; transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(91,60,240,.8)}
.rvb-btn.is-ghost{background:transparent; border:1px solid var(--line-2); color:var(--text)}
.rvb-btn.is-ghost:hover{border-color:var(--violet-lt); background:rgba(91,60,240,.12); box-shadow:none}

/* article footer */
.rvb-artfoot{margin-top:3em; padding-top:28px; border-top:1px solid var(--line); display:flex; justify-content:center}

@media(max-width:860px){
  .rvb-featured-grid{grid-template-columns:1fr}
  .rvb-featured .rvb-thumb{aspect-ratio:16/9}
}
@media(prefers-reduced-motion:reduce){
  .rvb *{animation:none!important}
  .rvb-reveal{opacity:1; transform:none; transition:none}
  .rvb-featured::before{animation:none}
}