:root{--fondo:#070a14;--fondo2:#0d1220;--fondo3:#121a2c;--tinta:#eef1f8;--tinta2:#98a2ba;--linea:rgba(255,255,255,.09);--vidrio:rgba(255,255,255,.04);
  --cian:#22d3ee;--violeta:#a78bfa;--ambar:#fbbf24;--rosa:#f472b6;--acento:var(--cian);
  --grad:linear-gradient(95deg,#22d3ee 0%,#a78bfa 45%,#fbbf24 100%);--sombra:0 20px 50px -20px rgba(34,211,238,.35);--ancho:62rem;--medida:40rem;
  --serif:"Fraunces","Iowan Old Style",Georgia,serif;--sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--tinta);font:18px/1.7 var(--sans);overflow-x:hidden;
  background-image:radial-gradient(900px 500px at 15% -10%,rgba(167,139,250,.18),transparent 60%),radial-gradient(800px 500px at 100% 20%,rgba(34,211,238,.12),transparent 60%),radial-gradient(700px 400px at 50% 110%,rgba(251,191,36,.08),transparent 60%);background-attachment:fixed}
a{color:var(--cian);text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .25s ease,color .2s}
a:hover{background-size:100% 1px}
::selection{background:rgba(167,139,250,.45)}
.progreso{position:fixed;top:0;left:0;right:0;height:3px;z-index:9;background:transparent}.progreso span{display:block;height:100%;width:0;background:var(--grad);box-shadow:0 0 12px rgba(34,211,238,.8);transition:width .1s linear}
.cab{position:sticky;top:0;z-index:5;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(7,10,20,.6);border-bottom:1px solid var(--linea)}
.cab{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center;justify-content:space-between;max-width:var(--ancho);margin:0 auto;padding:.8rem 1.4rem}
.marca{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--serif);font-weight:600;font-size:1.25rem;letter-spacing:.01em;color:var(--tinta);background:none;white-space:nowrap}
.marca-svg{width:2.1rem;height:2.1rem;filter:drop-shadow(0 0 6px rgba(34,211,238,.6))}.marca-svg .enl line{stroke:rgba(167,139,250,.9);stroke-width:1.6;stroke-linecap:round}
.marca-svg .n{fill:var(--cian);transform-origin:center;transform-box:fill-box;animation:latir 2.8s ease-in-out infinite}.marca-svg .n2{fill:var(--violeta);animation-delay:-.9s}.marca-svg .n3{fill:var(--ambar);animation-delay:-1.8s}
.cab nav{display:flex;gap:1.4rem;font-family:var(--sans);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em}
.cab nav a{color:var(--tinta2);padding:.25rem 0;position:relative;background:none}.cab nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.cab nav a:hover::after,.cab nav a.activo::after{transform:scaleX(1)}.cab nav a.activo,.cab nav a:hover{color:var(--tinta)}
main{max-width:var(--ancho);margin:0 auto;padding:2rem 1.4rem 4rem}
.entra{animation:entrar .8s cubic-bezier(.2,.7,.2,1) both}
h1{font-family:var(--serif);font-weight:400;font-size:2.6rem;line-height:1.1;letter-spacing:-.015em;margin:.3rem 0 1rem}
h2{font-family:var(--serif);font-weight:400;font-size:1.75rem;margin:2.4rem 0 .9rem}
h2.sec{font-family:var(--sans);font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--tinta2);display:flex;align-items:center;gap:.9rem;margin:3.4rem 0 1.3rem}
h2.sec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.18),transparent)}
h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin:1.6rem 0 .4rem}
p{margin:0 0 1.15rem}
blockquote{margin:1.4rem 0;padding:.4rem 0 .4rem 1.2rem;border-left:3px solid var(--violeta);color:var(--tinta2);font-family:var(--serif);font-style:italic;font-size:1.1em}
code{font:.86em/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--fondo3);padding:.12em .4em;border-radius:4px;color:#c7f9ff}
pre{background:var(--fondo2);padding:1rem 1.1rem;overflow:auto;border-radius:10px;border:1px solid var(--linea)}pre code{background:none;padding:0}
img{max-width:100%;height:auto;border-radius:8px}hr{border:0;height:1px;background:var(--linea);margin:2.4rem 0}
table{border-collapse:collapse;width:100%;font-size:.94em;margin:1.2rem 0}td,th{border:1px solid var(--linea);padding:.45rem .65rem;text-align:left}th{font-size:.8em;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta2)}
.meta{font-family:var(--sans);font-size:.74rem;font-weight:600;color:var(--tinta2);letter-spacing:.12em;text-transform:uppercase;margin:0 0 .7rem}
.pill{display:inline-block;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.32rem .8rem;margin-bottom:1rem;backdrop-filter:blur(6px)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* ---- portada */
body.portada main{padding-top:0}
.hero{position:relative;width:100vw;left:50%;margin-left:-50vw;min-height:min(86vh,820px);display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--linea)}
#red{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
.hero-in{position:relative;z-index:1;text-align:center;max-width:52rem;padding:5rem 1.4rem 4rem;pointer-events:none}
.hero-in .pill,.hero-in a{pointer-events:auto}
.hero h1{font-size:clamp(2.6rem,7vw,5rem);font-weight:300;line-height:1.02;letter-spacing:-.02em;margin:.4rem 0 1.2rem;text-shadow:0 0 40px rgba(7,10,20,.9)}
.hero h1 .grad{font-weight:600;font-style:italic;filter:drop-shadow(0 0 22px rgba(167,139,250,.35))}
.hero .lema{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.15rem,2.4vw,1.5rem);color:var(--tinta);opacity:.9;max-width:40rem;margin:0 auto 1.6rem;text-shadow:0 0 30px rgba(7,10,20,.9)}
.hero .pista{position:absolute;bottom:1rem;left:0;right:0;text-align:center;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta2);pointer-events:none}
.acciones{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.boton{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--sans);font-size:.86rem;font-weight:700;letter-spacing:.04em;padding:.75rem 1.35rem;border:1px solid rgba(255,255,255,.2);border-radius:999px;color:var(--tinta);background:rgba(255,255,255,.05);backdrop-filter:blur(6px);transition:transform .2s,background .2s,color .2s,box-shadow .25s,border-color .2s}
.boton:hover{transform:translateY(-2px);border-color:var(--cian);box-shadow:0 0 0 1px rgba(34,211,238,.4),0 12px 30px -12px rgba(34,211,238,.6)}
.boton.lleno{background:var(--grad);color:#070a14;border-color:transparent}.boton.lleno:hover{box-shadow:0 14px 34px -12px rgba(167,139,250,.8);color:#070a14}
.manifiesto{max-width:var(--medida);margin:4rem auto 1rem;font-family:var(--serif);font-size:1.32rem;line-height:1.6;font-weight:300}
.manifiesto p:first-of-type::first-letter{font-size:3.6em;line-height:.8;float:left;padding:.1em .12em 0 0;font-weight:600;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.manifiesto strong{font-weight:600;color:#fff}
.pilares{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin:3rem 0 0}
.pilar{position:relative;display:block;padding:1.5rem 1.4rem 1.4rem;border-radius:16px;background:var(--vidrio);border:1px solid var(--linea);color:var(--tinta);overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s}
.pilar::before{content:"";position:absolute;inset:0;background:radial-gradient(400px 200px at var(--px,50%) -20%,rgba(34,211,238,.18),transparent 70%);opacity:0;transition:opacity .3s}
.pilar:hover{transform:translateY(-4px);border-color:rgba(34,211,238,.5);box-shadow:var(--sombra)}.pilar:hover::before{opacity:1}
.pilar .num{font-family:var(--serif);font-size:2.4rem;font-weight:300;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pilar h3{margin:.5rem 0 .4rem}.pilar p{margin:0;color:var(--tinta2);font-size:.96rem}
.pilar .leer{display:inline-block;margin-top:.9rem;font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cian);transition:transform .2s}.pilar:hover .leer{transform:translateX(4px)}
.cita{position:relative;margin:4rem 0 1rem;padding:2.6rem 1.6rem;border-radius:20px;text-align:center;background:linear-gradient(135deg,rgba(167,139,250,.14),rgba(34,211,238,.08) 50%,rgba(251,191,36,.1));border:1px solid var(--linea);overflow:hidden}
.cita::after{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 60%,rgba(34,211,238,.12) 70%,transparent 80%);animation:girar 14s linear infinite;pointer-events:none}
.cita p{position:relative;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.3rem,3vw,1.9rem);line-height:1.35;margin:0 auto;max-width:36rem}
.cita p .grad{font-style:normal;font-weight:600}
/* ---- tarjetas de capítulos */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1rem;margin:0;padding:0;list-style:none}
.tarjeta{position:relative;display:block;background:var(--vidrio);border:1px solid var(--linea);border-radius:16px;padding:1.4rem 1.3rem 1.3rem;color:var(--tinta);overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.tarjeta:hover{transform:translateY(-5px);box-shadow:var(--sombra);border-color:rgba(167,139,250,.55)}
.tarjeta .gran{position:absolute;right:.7rem;top:-.5rem;font-family:var(--serif);font-size:4.6rem;font-weight:300;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.22;pointer-events:none}
.tarjeta .meta{margin-bottom:.35rem}.tarjeta h3{margin:.1rem 0 .45rem;font-size:1.25rem;line-height:1.25}.tarjeta p{margin:0;color:var(--tinta2);font-size:.95rem}
.tarjeta .leer{display:inline-block;margin-top:.9rem;font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cian);transition:transform .2s}.tarjeta:hover .leer{transform:translateX(4px)}
/* ---- lista del blog */
.lista{list-style:none;padding:0;margin:0}.lista li{display:grid;grid-template-columns:9rem 1fr;gap:1rem;padding:1.2rem 0;border-bottom:1px solid var(--linea)}
.lista li:last-child{border-bottom:0}.lista .meta{margin:.4rem 0 0}.lista h3{margin:0 0 .3rem;font-size:1.35rem}.lista p{margin:0;color:var(--tinta2);font-size:.97rem}
.lista h3 a{color:var(--tinta)}.lista h3 a:hover{color:var(--cian)}
/* ---- lectura */
.articulo{max-width:var(--medida);margin:0 auto}.articulo header{margin-bottom:2.2rem}.articulo header .resumen{font-family:var(--serif);font-size:1.25rem;line-height:1.45;color:var(--tinta2);font-style:italic}
.prosa{font-size:1.06rem;line-height:1.78;color:#dfe4f0}.prosa>p:first-of-type::first-letter{font-family:var(--serif);font-weight:600;font-size:3.6em;line-height:.8;float:left;padding:.1em .12em 0 0;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.prosa h2{font-size:1.6rem;color:#fff}.prosa h2::before{content:"";display:block;width:2.4rem;height:3px;border-radius:2px;background:var(--grad);margin-bottom:.7rem}
.prosa h3{color:#fff}.prosa a{color:var(--cian)}.prosa strong{color:#fff}
.descarga{margin:2.2rem 0 0;padding:1.2rem 1.3rem;background:var(--vidrio);border:1px solid var(--linea);border-radius:16px;display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between}
.descarga span{color:var(--tinta2);font-size:.95rem}
.navcap{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--linea)}
.navcap a{display:block;background:none;color:var(--tinta);padding:.8rem .9rem;border-radius:12px;border:1px solid transparent;transition:background .2s,border-color .2s}.navcap a:hover{background:var(--vidrio);border-color:var(--linea)}
.navcap .meta{margin:0 0 .2rem}.navcap .sig{text-align:right}
.vacio{color:var(--tinta2);font-style:italic}
.pie{max-width:var(--ancho);margin:0 auto;padding:1.6rem 1.4rem 3rem;color:var(--tinta2);font-size:.88rem}
.pie-nodos{height:14px;margin-bottom:1.2rem;background:radial-gradient(circle,rgba(167,139,250,.7) 1.6px,transparent 2.2px) 0 50%/24px 14px repeat-x;opacity:.6}
.pie p{margin:.3rem 0}.pie-lema{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--tinta)}
@keyframes latir{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes entrar{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:760px){.lista li{grid-template-columns:1fr;gap:.2rem}.hero{min-height:78vh}.hero-in{padding:4rem 1.2rem 3.5rem}}
@media (max-width:600px){body{font-size:17px}h1{font-size:2rem}.navcap{grid-template-columns:1fr}.navcap .sig{text-align:left}.manifiesto{font-size:1.15rem}}