*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:#06010E; color:#F4ECFF;
  font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased;
  line-height:1.5; overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:99px}
::selection{background:rgba(217,70,239,.4)}

:root{
  --purple:#7C3AED; --magenta:#D946EF; --pink:#FF6FB1;
  --text:#F4ECFF; --muted:rgba(244,236,255,.60); --faint:rgba(244,236,255,.40);
  --line:rgba(255,255,255,.10);
  --glass:linear-gradient(150deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 100%);
  --maxw:1200px;
}

/* ---------- ambient glows ---------- */
.bg-fx{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.bg-fx i{position:absolute; border-radius:50%; filter:blur(90px)}
.bg-fx .g1{top:-160px; left:-120px; width:520px; height:520px; background:radial-gradient(circle,var(--purple),transparent 62%); opacity:.42}
.bg-fx .g2{top:340px; right:-180px; width:560px; height:560px; background:radial-gradient(circle,var(--magenta),transparent 62%); opacity:.28}
.bg-fx .g3{bottom:-220px; left:30%; width:620px; height:620px; background:radial-gradient(circle,#4C1D95,transparent 64%); opacity:.30}

.wrap{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 28px}

.eyebrow{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; font-weight:600; color:var(--faint)}
.heading{font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.02em; line-height:1.08}

/* ================= NAV ================= */
header.nav{position:sticky; top:0; z-index:50; padding:14px 0;
  backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
  background:rgba(6,1,14,.72); border-bottom:1px solid var(--line)}
.nav-inner{display:flex; align-items:center; gap:24px}
.logo{display:flex; align-items:center; gap:10px; flex-shrink:0; font-family:'Space Grotesk',sans-serif;
  font-weight:700; font-size:21px; letter-spacing:-.02em}
.logo svg{width:30px; height:30px; flex-shrink:0}
.logo b{font-weight:700}
.navlinks{display:flex; gap:4px; margin-left:8px; flex:1; min-width:0; overflow:hidden}
.navlinks a{font-size:13px; font-weight:600; color:var(--muted); padding:8px 12px; border-radius:9px;
  white-space:nowrap; transition:color .15s, background .15s}
.navlinks a:hover,.navlinks a.current-menu-item{color:var(--text); background:rgba(255,255,255,.05)}
.nav-act{display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0}
.icon-btn{width:40px; height:40px; border-radius:11px; border:1px solid var(--line); cursor:pointer;
  background:rgba(255,255,255,.04); color:var(--text); display:inline-flex; align-items:center; justify-content:center}
.icon-btn:hover{background:rgba(255,255,255,.08)}
.icon-btn svg{width:18px;height:18px}
.btn-cta{display:inline-flex; align-items:center; gap:8px; padding:0 18px; height:40px; border-radius:11px;
  border:none; cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; color:#fff;
  background:linear-gradient(135deg,var(--purple),var(--magenta)); box-shadow:0 10px 24px rgba(124,58,237,.4); white-space:nowrap}
.btn-cta:hover{filter:brightness(1.08)}
.menu-toggle{display:none}

/* ================= HERO INTRO ================= */
.intro{padding:64px 0 8px}
.intro .eyebrow{margin-bottom:18px}
.intro h1{font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.03em;
  font-size:clamp(38px,6vw,68px); line-height:1.02; margin:0 0 18px; max-width:18ch}
.intro h1 em{font-style:normal; background:linear-gradient(120deg,var(--pink),var(--magenta) 55%,var(--purple));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.intro p{font-size:17px; color:var(--muted); max-width:54ch; margin:0}

/* ================= FEATURED ================= */
section.featured{padding:40px 0}
.feat-card{position:relative; display:grid; grid-template-columns:1.15fr 1fr; gap:0; border-radius:24px;
  overflow:hidden; border:1px solid var(--line); background:var(--glass);
  box-shadow:0 40px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18)}
.feat-art{position:relative; min-height:420px; overflow:hidden;
  background:radial-gradient(120% 100% at 30% 110%, #D946EF 0%, #7C3AED 38%, #160829 78%)}
.feat-art .stage{position:absolute; inset:0; opacity:.5;
  background:
    repeating-linear-gradient(78deg, rgba(255,255,255,.16) 0 2px, transparent 2px 60px),
    repeating-linear-gradient(102deg, rgba(255,255,255,.12) 0 2px, transparent 2px 70px)}
.feat-art .crowd{position:absolute; left:0; right:0; bottom:0; height:42%;
  background:linear-gradient(transparent, rgba(6,1,14,.85)); }
.feat-art .crowd::before{content:""; position:absolute; bottom:0; left:0; right:0; height:60%;
  background-image:radial-gradient(circle at 50% 100%, #2a0a3a 0 6px, transparent 7px);
  background-size:26px 30px; opacity:.7; mask:linear-gradient(transparent,#000)}
.feat-art .floats{position:absolute; inset:0}
.feat-art .floats span{position:absolute; width:8px; height:8px; border-radius:50%; background:#fff;
  box-shadow:0 0 12px 3px rgba(255,111,177,.8); opacity:.9}
.feat-art .badge{position:absolute; top:22px; left:22px}

/* Featured con imagen real del post */
.feat-art .feat-thumb{position:absolute; inset:0; object-fit:cover; width:100%; height:100%; opacity:.6}

.feat-body{padding:44px 44px; display:flex; flex-direction:column; justify-content:center; gap:18px}
.tag{display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px;
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; background:rgba(217,70,239,.16); border:1px solid rgba(217,70,239,.4); color:#F8C7FF; width:fit-content}
.tag .d{width:6px; height:6px; border-radius:50%; background:var(--magenta); box-shadow:0 0 8px var(--magenta)}
.feat-body h2{font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.02em;
  font-size:clamp(28px,3.4vw,40px); line-height:1.05; margin:0}
.feat-body p{font-size:16px; color:var(--muted); margin:0; max-width:48ch}
.meta{display:flex; align-items:center; gap:12px; font-size:13px; color:var(--faint);
  font-family:'JetBrains Mono',monospace; letter-spacing:.04em}
.meta .av{width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--purple),var(--magenta));
  display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; font-family:'Space Grotesk'}
.meta .who{color:var(--text); font-weight:600}
.read{display:inline-flex; align-items:center; gap:9px; font-family:'Space Grotesk'; font-weight:600; font-size:15px;
  color:var(--text); width:fit-content; margin-top:6px}
.read .arr{display:inline-flex; width:34px; height:34px; border-radius:50%; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--purple),var(--magenta)); transition:transform .2s}
.read:hover .arr{transform:translateX(4px)}

/* ================= FILTER ================= */
.filterbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:28px 0 10px}
.filterbar .lbl{margin-right:6px}
.chip{font-family:'Space Grotesk'; font-weight:600; font-size:13px; padding:9px 16px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--muted); transition:.15s}
.chip:hover{color:var(--text); border-color:rgba(255,255,255,.25)}
.chip.active{color:#fff; background:linear-gradient(135deg,var(--purple),var(--magenta)); border-color:transparent;
  box-shadow:0 8px 20px rgba(124,58,237,.4)}

/* ================= GRID DE POSTS ================= */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:18px 0 20px}
.post{display:flex; flex-direction:column; border-radius:20px; overflow:hidden; cursor:pointer;
  border:1px solid var(--line); background:var(--glass); transition:transform .2s, border-color .2s, box-shadow .2s}
.post:hover{transform:translateY(-4px); border-color:rgba(217,70,239,.4); box-shadow:0 30px 60px rgba(0,0,0,.5)}
.post .part{position:relative; height:172px; overflow:hidden}
.post .part .stage{position:absolute; inset:0; opacity:.45;
  background:repeating-linear-gradient(80deg, rgba(255,255,255,.14) 0 2px, transparent 2px 54px)}
.post .part .tag{position:absolute; top:14px; left:14px}
/* imagen real del post */
.post .part img.post-thumb{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.75}
.pa-1{background:radial-gradient(120% 120% at 20% 0%, #7C3AED, #160829 80%)}
.pa-2{background:radial-gradient(120% 120% at 80% 0%, #D946EF, #2a0833 80%)}
.pa-3{background:radial-gradient(120% 120% at 50% 120%, #A855F7, #160829 78%)}
.post .pbody{padding:22px 22px 24px; display:flex; flex-direction:column; gap:12px; flex:1}
.post h3{font-family:'Space Grotesk'; font-weight:700; letter-spacing:-.01em; font-size:20px; line-height:1.15; margin:0}
.post p{font-size:14px; color:var(--muted); margin:0; flex:1}
.post .pmeta{display:flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace;
  font-size:11px; color:var(--faint); letter-spacing:.04em; margin-top:4px; padding-top:14px; border-top:1px solid var(--line)}
.post .pmeta .dot{opacity:.5}

/* ================= POST INDIVIDUAL ================= */
.single-wrap{max-width:740px; margin:0 auto; padding:48px 28px 80px}
.single-hero{position:relative; border-radius:20px; overflow:hidden; margin-bottom:40px; min-height:320px;
  background:radial-gradient(120% 100% at 30% 110%, #D946EF 0%, #7C3AED 38%, #160829 78%)}
.single-hero img{width:100%; height:360px; object-fit:cover; opacity:.7}
.single-hero .stage{position:absolute; inset:0; opacity:.4;
  background:repeating-linear-gradient(78deg, rgba(255,255,255,.16) 0 2px, transparent 2px 60px)}
.single-meta{display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap}
.single-title{font-family:'Space Grotesk'; font-weight:700; letter-spacing:-.025em;
  font-size:clamp(28px,4vw,46px); line-height:1.06; margin:0 0 24px; color:var(--text)}
.single-excerpt{font-size:18px; color:var(--muted); line-height:1.7; margin-bottom:36px;
  padding-bottom:36px; border-bottom:1px solid var(--line)}
.entry-content{font-size:16px; color:var(--muted); line-height:1.8}
.entry-content h2{font-family:'Space Grotesk'; font-weight:700; font-size:26px; letter-spacing:-.02em;
  color:var(--text); margin:2.5em 0 .75em}
.entry-content h3{font-family:'Space Grotesk'; font-weight:700; font-size:20px;
  color:var(--text); margin:2em 0 .6em}
.entry-content p{margin:0 0 1.4em}
.entry-content a{color:var(--pink); text-decoration:underline; text-decoration-color:rgba(255,111,177,.35)}
.entry-content a:hover{text-decoration-color:var(--pink)}
.entry-content blockquote{border-left:3px solid var(--magenta); margin:2em 0;
  padding:1rem 1.5rem; background:rgba(217,70,239,.06); border-radius:0 12px 12px 0;
  font-size:17px; font-style:italic; color:var(--text)}
.entry-content img{border-radius:14px; margin:2em 0; width:100%}
.entry-content ul, .entry-content ol{padding-left:1.5em; margin:0 0 1.4em}
.entry-content li{margin-bottom:.5em}
.entry-content code{font-family:'JetBrains Mono',monospace; font-size:13px;
  background:rgba(255,255,255,.08); padding:2px 7px; border-radius:5px; color:#F8C7FF}
.entry-content pre{background:rgba(255,255,255,.05); border:1px solid var(--line);
  border-radius:12px; padding:1.25rem; overflow-x:auto; margin:2em 0}
.entry-content pre code{background:none; padding:0; color:var(--text)}

/* Post tags */
.post-tags{display:flex; flex-wrap:wrap; gap:8px; margin:2.5em 0 0}
.post-tags a{font-family:'JetBrains Mono'; font-size:11px; font-weight:600; letter-spacing:.1em;
  padding:5px 13px; border-radius:999px; background:rgba(124,58,237,.15);
  border:1px solid rgba(124,58,237,.35); color:#c4b5fd; text-transform:uppercase; transition:.15s}
.post-tags a:hover{background:rgba(124,58,237,.3); color:#fff}

/* Autor box */
.author-box{display:flex; gap:18px; align-items:flex-start; background:rgba(255,255,255,.04);
  border:1px solid var(--line); border-radius:18px; padding:24px; margin:3em 0}
.author-box img, .author-box .author-av{width:54px; height:54px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--purple),var(--magenta)); display:flex;
  align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:700; font-size:18px; color:#fff}
.author-box .author-info .name{font-family:'Space Grotesk'; font-weight:700; font-size:15px; margin-bottom:4px}
.author-box .author-info p{font-size:13px; color:var(--muted); margin:0}

/* Posts relacionados */
.related{margin:3em 0}
.related .section-label{font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint); margin-bottom:18px}
.related .rel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.rel-card{border-radius:14px; overflow:hidden; border:1px solid var(--line);
  background:var(--glass); transition:border-color .2s, transform .2s}
.rel-card:hover{border-color:rgba(217,70,239,.4); transform:translateY(-2px)}
.rel-card .rel-art{height:100px; background:radial-gradient(120% 120% at 20% 0%, #7C3AED, #160829 80%); position:relative; overflow:hidden}
.rel-card .rel-art img{width:100%; height:100%; object-fit:cover; opacity:.7}
.rel-card .rel-body{padding:14px}
.rel-card h4{font-family:'Space Grotesk'; font-weight:700; font-size:14px; line-height:1.3; margin:0 0 6px}
.rel-card .rel-meta{font-family:'JetBrains Mono'; font-size:10px; color:var(--faint); letter-spacing:.04em}

/* ================= NEWSLETTER ================= */
section.news{padding:56px 0 72px}
.news-card{position:relative; overflow:hidden; border-radius:26px; padding:56px 48px; text-align:center;
  border:1px solid rgba(217,70,239,.3);
  background:radial-gradient(120% 160% at 50% -40%, rgba(217,70,239,.35), rgba(124,58,237,.1) 50%, rgba(255,255,255,.02))}
.news-card h2{font-family:'Space Grotesk'; font-weight:700; letter-spacing:-.02em; font-size:clamp(26px,3.5vw,38px); margin:0 0 12px}
.news-card p{color:var(--muted); font-size:16px; max-width:48ch; margin:0 auto 28px}
.news-form{display:flex; gap:10px; max-width:480px; margin:0 auto; flex-wrap:wrap; justify-content:center}
.news-form input{flex:1; min-width:220px; height:50px; padding:0 18px; border-radius:13px; font-family:inherit; font-size:15px;
  background:rgba(6,1,14,.5); border:1px solid var(--line); color:var(--text)}
.news-form input::placeholder{color:var(--faint)}
.news-form input:focus{outline:none; border-color:rgba(217,70,239,.6)}
.news-form button{height:50px; padding:0 26px}

/* ================= FOOTER ================= */
footer{border-top:1px solid var(--line); padding:40px 0; position:relative; z-index:1}
.foot{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.foot .logo{font-size:18px}
.foot .links{display:flex; gap:22px; font-size:13px; color:var(--muted); flex-wrap:wrap}
.foot .links a:hover{color:var(--text)}
.foot .cr{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--faint); letter-spacing:.05em}

/* ================= PAGINACIÓN ================= */
.pagination{display:flex; justify-content:center; gap:8px; padding:20px 0 60px}
.pagination a, .pagination span{font-family:'Space Grotesk'; font-weight:600; font-size:14px;
  padding:10px 18px; border-radius:11px; border:1px solid var(--line);
  background:rgba(255,255,255,.04); color:var(--muted); transition:.15s}
.pagination a:hover{color:var(--text); border-color:rgba(255,255,255,.25)}
.pagination .current{color:#fff; background:linear-gradient(135deg,var(--purple),var(--magenta));
  border-color:transparent; box-shadow:0 8px 20px rgba(124,58,237,.4)}

/* ================= SEARCH / ARCHIVE ================= */
.archive-header{padding:48px 0 8px}
.archive-header .eyebrow{margin-bottom:10px}
.archive-title{font-family:'Space Grotesk'; font-weight:700; font-size:clamp(28px,4vw,46px);
  letter-spacing:-.025em; margin:0 0 12px}
.archive-desc{font-size:16px; color:var(--muted); max-width:54ch}

/* ================= RESPONSIVE ================= */
@media (max-width:920px){
  .navlinks{display:none}
  .menu-toggle{display:inline-flex}
  .feat-card{grid-template-columns:1fr}
  .feat-art{min-height:240px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .related .rel-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .wrap{padding:0 18px}
  .intro{padding:44px 0 4px}
  .feat-body{padding:30px 26px}
  .grid{grid-template-columns:1fr}
  .news-card{padding:40px 24px}
  .btn-cta span.lbl{display:none}
  .foot{flex-direction:column; align-items:flex-start; gap:16px}
  .related .rel-grid{grid-template-columns:1fr}
  .single-wrap{padding:32px 18px 60px}
}