/* Estilos del blog de Liquatur Labs (generado por scripts/build-blog.mjs)
   Réplica en CSS plano de la estética del SPA (Tailwind): mismo fondo #050505,
   mismas fuentes (Inter / Montserrat), mismos acentos (rojo→naranja→amarillo),
   misma Navbar translúcida fija, mismas tarjetas white/5 y mismo Footer. */
:root{--bg:#050505;--fg:rgba(255,255,255,.6);--white:#fff;--muted:rgba(255,255,255,.4);--line:rgba(255,255,255,.1);--orange:#FF8A00;--red:#FF003C;--yellow:#FFD600}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:"Inter",ui-sans-serif,system-ui,sans-serif;font-weight:300;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:var(--orange);text-decoration:none}a:hover{text-decoration:underline}
/* Resplandor ambiental (equivale al blur-[140px] del hero del SPA) */
.glow{position:fixed;top:50%;left:50%;width:800px;height:800px;transform:translate(-50%,-50%);background:linear-gradient(to top right,rgba(255,0,60,.2),rgba(255,138,0,.1),transparent);border-radius:50%;filter:blur(140px);opacity:.4;pointer-events:none;z-index:0}
/* Navbar (idéntica a src/components/Navbar.tsx) */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(0,0,0,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:32px;width:auto;object-fit:contain}
.brand span{color:var(--white);font-family:"Montserrat",sans-serif;font-weight:700;font-size:1.25rem;letter-spacing:-.02em}
.site-nav{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:500}
.site-nav a{color:rgba(255,255,255,.7)}
.site-nav a:hover{color:var(--white);text-decoration:none}
.nav-cta{display:inline-flex;align-items:center;padding:8px 20px;font-size:14px;font-weight:600;color:var(--white);border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);transition:background .3s}
.nav-cta:hover{background:rgba(255,255,255,.2);text-decoration:none}
/* Índice */
.index-wrap{position:relative;z-index:1;max-width:1152px;margin:0 auto;padding:96px 24px 128px}
.blog-hero{text-align:center;padding:64px 0 72px}
.blog-hero h1{font-family:"Montserrat",sans-serif;font-weight:300;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(3rem,8vw,6rem);line-height:1.1;margin:0 0 24px;background:linear-gradient(90deg,var(--red),#FF5500,var(--yellow));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 15px rgba(255,0,60,.8)) drop-shadow(0 0 40px rgba(255,138,0,.4));-webkit-text-stroke:1px rgba(255,255,255,.1)}
.blog-hero p{color:rgba(255,255,255,.5);font-size:1.15rem;max-width:640px;margin:0 auto;font-weight:300}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:32px}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:1rem;overflow:hidden;background:rgba(255,255,255,.05);transition:transform .3s,background .3s}
.card:hover{transform:translateY(-4px);background:rgba(255,255,255,.1);text-decoration:none}
.card-cover{width:100%;height:180px;object-fit:cover}
.card-cover.placeholder{background:linear-gradient(135deg,rgba(255,0,60,.25),rgba(255,138,0,.12),transparent)}
.card-body{padding:32px}
.card-body h2{font-family:"Montserrat",sans-serif;font-weight:700;color:var(--white);font-size:1.5rem;line-height:1.25;letter-spacing:-.02em;margin:16px 0 12px}
.excerpt{color:rgba(255,255,255,.6);font-size:.95rem;font-weight:300;line-height:1.7;margin:0 0 16px}
.tag{display:inline-flex;align-items:center;font-size:12px;font-weight:600;color:var(--orange);background:rgba(255,138,0,.1);border:1px solid rgba(255,138,0,.3);border-radius:999px;padding:6px 16px}
.meta{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin:0}
/* Artículo */
.article-wrap{position:relative;z-index:1;max-width:768px;margin:0 auto;padding:112px 24px 128px}
.back{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.5);font-size:14px;margin:0 0 32px;transition:color .3s}
.back:hover{color:var(--white);text-decoration:none}
.back.bottom{margin:56px 0 0}
.article .tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.article h1{font-family:"Montserrat",sans-serif;font-weight:700;color:var(--white);font-size:clamp(2.25rem,5vw,3.5rem);line-height:1.1;letter-spacing:-.02em;margin:0 0 16px}
.article .meta{margin-bottom:32px}
.article .cover{width:100%;border-radius:1rem;border:1px solid var(--line);margin-bottom:40px}
.body{font-size:1.125rem;color:rgba(255,255,255,.6);font-weight:300}
.body h2{font-family:"Montserrat",sans-serif;font-weight:700;color:var(--white);font-size:1.875rem;letter-spacing:-.02em;margin:56px 0 16px}
.body h3{font-family:"Montserrat",sans-serif;font-weight:600;color:rgba(255,255,255,.9);font-size:1.375rem;margin:40px 0 12px}
.body p{margin:0 0 24px}
.body ul,.body ol{padding-left:24px;margin:0 0 24px}
.body li{margin-bottom:10px}
.body li::marker{color:var(--orange)}
.body strong{color:var(--white);font-weight:600}
.body a{color:var(--orange)}
.body blockquote{margin:40px 0;padding:8px 0 8px 24px;border-left:4px solid var(--red);color:rgba(255,255,255,.7);font-family:"Montserrat",sans-serif;font-size:1.5rem;font-weight:300;font-style:italic;line-height:1.4}
.body code{background:rgba(255,255,255,.08);border:1px solid var(--line);padding:2px 6px;border-radius:6px;font-size:.9em}
.body img{max-width:100%;border-radius:1rem;border:1px solid var(--line)}
.body .table-wrap{overflow-x:auto;margin:0 0 24px}
.body table{border-collapse:collapse;width:100%;font-size:.98rem;border:1px solid var(--line);border-radius:1rem;overflow:hidden;background:rgba(255,255,255,.02)}
.body th,.body td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.body thead th{background:rgba(255,138,0,.08);color:var(--white);font-family:"Montserrat",sans-serif;font-weight:600}
.body tbody tr:last-child td{border-bottom:0}
.body tbody td:first-child{color:var(--white);font-weight:600}
/* Footer (idéntico a src/components/Footer.tsx) */
.site-footer{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:48px 24px;border-top:1px solid var(--line);background:#000}
.foot-logo{height:48px;width:auto;margin-bottom:32px;filter:invert(1);opacity:.8;transition:opacity .5s}
.foot-logo:hover{opacity:1}
.socials{display:flex;align-items:center;gap:24px;margin-bottom:48px}
.socials a{color:var(--muted);display:inline-flex;transition:color .3s}
.socials a:hover{color:var(--white)}
.socials svg{width:20px;height:20px}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-bottom:32px;font-size:14px}
.foot-links a{color:var(--muted);transition:color .3s}
.foot-links a:hover{color:var(--white);text-decoration:none}
.foot-copy{color:var(--muted);font-size:14px;text-align:center;margin:0}
.foot-copy span{display:inline-block;margin-top:8px;color:rgba(255,255,255,.6)}
@media(max-width:768px){.site-nav{display:none}.nav-cta{padding:8px 16px}}
@media(max-width:520px){.grid{grid-template-columns:1fr}.card-body{padding:24px}}