/* =====================================================================
   INMO1 · blog.css — hoja de estilo del blog
   Usa las mismas variables del sitio. Incluye vista nocturna.
   ===================================================================== */
:root{
  --brand:#1F66FF; --brand-2:#0E52E6; --brand-100:#E9F1FF; --signal:#4D9CFF;
  --ink:#0A1020; --ink-2:#46506A; --ink-3:#6E7993; --ink-4:#A6AFC4;
  --paper:#ffffff; --paper-2:#F5F8FF; --paper-3:#EDF2FB;
  --line:#E4EBF7; --line-2:#D5DEEF;
  --navy:#070B16; --navy-2:#0B1322;
  --r1:8px; --r2:14px; --r3:20px; --r-pill:50px;
  --maxw:1180px; --read:720px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --display:'Jost',system-ui,-apple-system,sans-serif;
}
html[data-theme="dark"]{
  --paper:#0A101C; --paper-2:#0D1524; --paper-3:#111B2E;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --ink:#EEF3FC; --ink-2:#BDC9DF; --ink-3:#8E9CB8; --ink-4:#6B7994;
  --navy:#05080F; --navy-2:#080D18; --brand-100:rgba(31,102,255,.16);
}
html{color-scheme:light; scroll-behavior:smooth;}
html[data-theme="dark"]{color-scheme:dark;}
*{margin:0; padding:0; box-sizing:border-box;}
body{font-family:var(--display); background:var(--paper); color:var(--ink-2);
  font-size:16px; line-height:1.72; -webkit-font-smoothing:antialiased;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
a{color:var(--brand); text-decoration:none;}

/* ---------- barra ---------- */
header{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
html[data-theme="dark"] header{background:rgba(10,16,28,.92);}
header .wrap{display:flex; align-items:center; justify-content:space-between; height:70px; gap:18px;}
.hd-lg{display:flex; align-items:center; gap:14px;}
.hd-lg img{height:24px; display:block;}
html[data-theme="dark"] .hd-lg img{filter:brightness(0) invert(1);}
.hd-tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-4); border-left:1px solid var(--line-2); padding-left:14px;}
.hd-nav{display:flex; align-items:center; gap:8px;}
.hd-nav a{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--line); padding:9px 15px; border-radius:var(--r-pill);
  transition:.28s var(--ease);}
.hd-nav a:hover{border-color:var(--brand); color:var(--brand);}
.hd-nav a.solid{background:var(--brand); border-color:var(--brand); color:#fff;}
.hd-nav a.solid:hover{background:var(--brand-2); border-color:var(--brand-2); color:#fff;}
.themebtn{width:34px; height:34px; border:1px solid var(--line); background:transparent; border-radius:50%;
  cursor:pointer; color:var(--ink-2); display:grid; place-items:center; transition:.28s var(--ease); flex:none;}
.themebtn:hover{border-color:var(--brand); color:var(--brand);}
.themebtn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round;}
.themebtn .ic-sun{display:none;}
html[data-theme="dark"] .themebtn .ic-sun{display:block;}
html[data-theme="dark"] .themebtn .ic-moon{display:none;}
.langbtn{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:transparent;color:var(--ink-3);font:600 10px/1 var(--mono);letter-spacing:.06em;cursor:pointer;transition:.25s var(--ease);flex:none;}
.langbtn:hover{border-color:var(--brand);color:var(--brand);}
.langbtn .on{color:var(--ink);}.langbtn .off{opacity:.45}.langbtn .sep{opacity:.3}
.langbtn.en .on{opacity:.45;color:inherit}.langbtn.en .off{opacity:1;color:var(--ink)}
@media(max-width:700px){.hd-tag{display:none;} .hd-nav a:not(.solid){display:none;}.hd-nav{gap:6px}}
@media(max-width:420px){.themebtn{display:none}.hd-nav a.solid{padding-inline:11px;font-size:10.5px}.wrap{padding-inline:18px}}

/* ---------- portada del listado ---------- */
.blog-head{padding:64px 0 40px; border-bottom:1px solid var(--line);}
.kicker{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brand); margin-bottom:14px;}
.blog-head h1{font-size:clamp(32px,4.6vw,52px); font-weight:600; letter-spacing:-.035em;
  color:var(--ink); line-height:1.05;}
.blog-head p{margin-top:16px; max-width:70ch; font-size:17px; color:var(--ink-3);}

/* ---------- filtros ---------- */
.tags{display:flex; flex-wrap:wrap; gap:8px; margin:30px 0 0;}
.tag{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-2);
  border:1px solid var(--line); background:var(--paper); padding:7px 13px; border-radius:var(--r-pill);
  cursor:pointer; transition:.25s var(--ease);}
.tag:hover{border-color:var(--brand); color:var(--brand);}
.tag.on{background:var(--brand); border-color:var(--brand); color:#fff;}

/* ---------- retícula de artículos ---------- */
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; padding:44px 0 70px;}
.post{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r3);
  overflow:hidden; background:var(--paper); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);}
.post:hover{transform:translateY(-5px); border-color:rgba(31,102,255,.4); box-shadow:0 22px 50px rgba(10,16,32,.12);}
.post-img{aspect-ratio:16/9; overflow:hidden; background:var(--paper-3);}
.post-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease);}
.post:hover .post-img img{transform:scale(1.05);}
.post-body{padding:22px 22px 24px; display:flex; flex-direction:column; gap:9px; flex:1;}
.post-meta{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4);}
.post-meta .cat{color:var(--brand);}
.post h2{font-size:19px; font-weight:600; letter-spacing:-.015em; color:var(--ink); line-height:1.3;}
.post h2 a{color:inherit;}
.post p{font-size:14px; line-height:1.6; color:var(--ink-3); flex:1;}
.post-go{font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--brand);
  display:inline-flex; align-items:center; gap:7px; margin-top:4px;}
.post:hover .post-go{gap:11px;}
.post.hide{display:none;}
@media(max-width:1000px){.posts{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.posts{grid-template-columns:1fr;}}

/* ---------- artículo ---------- */
.art-hero{padding:56px 0 0;}
.art-hero .wrap{max-width:var(--read);}
.art-meta{display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); margin-bottom:18px;}
.art-meta .cat{color:var(--brand);}
.art-hero h1{font-size:clamp(29px,4vw,45px); font-weight:600; letter-spacing:-.03em;
  color:var(--ink); line-height:1.1;}
.art-lead{margin-top:20px; font-size:19px; line-height:1.66; color:var(--ink-3); font-weight:300;}
.art-cover{margin:40px auto 0; max-width:1020px; padding:0 28px;}
.art-cover img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r3); display:block; border:1px solid var(--line);}
.art-cover figcaption{margin-top:10px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-4); text-align:center;}

article.cuerpo{max-width:var(--read); margin:0 auto; padding:44px 28px 20px;}
article.cuerpo h2{font-size:25px; font-weight:600; letter-spacing:-.02em; color:var(--ink);
  margin:44px 0 14px; line-height:1.25; scroll-margin-top:90px;}
article.cuerpo h3{font-size:18.5px; font-weight:600; color:var(--ink); margin:30px 0 10px;}
article.cuerpo p{margin-bottom:18px; font-size:16.5px; line-height:1.78;}
article.cuerpo ul,article.cuerpo ol{margin:0 0 20px; padding-left:0; list-style:none;}
article.cuerpo li{position:relative; padding-left:22px; margin-bottom:10px; line-height:1.7;}
article.cuerpo ul li::before{content:""; position:absolute; left:2px; top:12px; width:6px; height:6px;
  background:var(--brand); border-radius:2px;}
article.cuerpo ol{counter-reset:n;}
article.cuerpo ol li{counter-increment:n;}
article.cuerpo ol li::before{content:counter(n); position:absolute; left:0; top:0;
  font-family:var(--mono); font-size:12px; color:var(--brand);}
article.cuerpo b,article.cuerpo strong{color:var(--ink); font-weight:600;}
article.cuerpo a{border-bottom:1px solid rgba(31,102,255,.35);}
article.cuerpo a:hover{border-bottom-color:var(--brand);}
article.cuerpo blockquote{margin:28px 0; padding:20px 24px; border-left:3px solid var(--brand);
  background:var(--paper-2); border-radius:0 var(--r2) var(--r2) 0; font-size:17px; color:var(--ink-2);}
article.cuerpo figure{margin:32px 0;}
article.cuerpo figure img{width:100%; border-radius:var(--r2); border:1px solid var(--line); display:block;}
article.cuerpo figcaption{margin-top:9px; font-size:12.5px; color:var(--ink-4); text-align:center;}

/* fuentes editoriales: visibles, fechadas y fáciles de auditar */
.sources{margin-top:48px; padding:26px 28px; background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--r2);}
.sources h2{margin-top:0!important; font-size:21px!important;}
.sources p{font-size:14px!important; color:var(--ink-3);}
.sources ul{margin-bottom:0!important;}
.sources li{font-size:14px; color:var(--ink-3);}

/* tabla de datos */
.dtab{width:100%; border-collapse:collapse; margin:26px 0; font-size:14.5px;}
/* en pantallas estrechas la tabla se desplaza sola en vez de romper la página */
@media(max-width:640px){
  .dtab{display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch;
    font-size:13px; margin:22px -28px; padding:0 28px; width:calc(100% + 56px);}
  .dtab::-webkit-scrollbar{height:3px;}
  .dtab::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:3px;}
  article.cuerpo{overflow-x:hidden;}
  .kpis{grid-template-columns:1fr 1fr;}
}
.dtab th,.dtab td{text-align:left; padding:11px 13px; border-bottom:1px solid var(--line);}
.dtab th{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);}
.dtab td b{color:var(--ink);}
.dtab tr:hover td{background:var(--paper-2);}

/* cifras destacadas */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r2); overflow:hidden; margin:30px 0;}
.kpis div{background:var(--paper); padding:20px 18px;}
.kpis b{display:block; font-size:27px; font-weight:600; letter-spacing:-.03em; color:var(--ink); line-height:1;}
.kpis span{display:block; margin-top:7px; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);}
@media(max-width:700px){.kpis{grid-template-columns:1fr 1fr;}}

/* ---------- descarga con registro ---------- */
.gate{max-width:var(--read); margin:50px auto; padding:0 28px;}
.gate-box{background:var(--navy); border-radius:var(--r3); padding:36px 34px; position:relative; overflow:hidden;}
.gate-box::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 60% at 100% 0%, rgba(31,102,255,.22), transparent 62%);}
.gate-box > *{position:relative; z-index:1;}
.gate-k{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#7FB0FF; margin-bottom:12px;}
.gate-box h3{color:#fff; font-size:23px; font-weight:600; letter-spacing:-.02em; line-height:1.25;}
.gate-box > p{color:#9FB0CC; font-size:14.5px; margin-top:10px; max-width:52ch;}
.gate-form{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px;}
.gate-form .full{grid-column:1/-1;}
.gate-form input{width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r1); padding:13px 15px; color:#fff; font-family:var(--display); font-size:14.5px;
  transition:.25s var(--ease);}
.gate-form input::placeholder{color:#7E90B2;}
.gate-form input:focus{outline:none; border-color:#7FB0FF; background:rgba(255,255,255,.1);}
.gate-btn{grid-column:1/-1; background:var(--brand); color:#fff; border:none; border-radius:var(--r-pill);
  padding:14px; font-family:var(--display); font-size:15px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:9px; transition:.28s var(--ease);}
.gate-btn:hover{background:var(--brand-2); transform:translateY(-2px); box-shadow:0 14px 34px rgba(31,102,255,.4);}
.gate-btn svg{width:17px; height:17px;}
.gate-btn.loading{opacity:.6; pointer-events:none;}
.gate-msg{grid-column:1/-1; font-size:13px; min-height:19px;}
.gate-msg.err{color:#FF8A8A;} .gate-msg.ok{color:#6EE7A0;}
.gate-legal{grid-column:1/-1; font-size:11.5px; line-height:1.6; color:#7E90B2;}
.gate-legal a{color:#9FB0CC; border-bottom:1px solid rgba(255,255,255,.2);}
@media(max-width:600px){.gate-form{grid-template-columns:1fr;} .gate-box{padding:28px 22px;}}

/* ---------- compartir ---------- */
.share{max-width:var(--read); margin:0 auto; padding:26px 28px 10px; display:flex; align-items:center;
  gap:12px; flex-wrap:wrap; border-top:1px solid var(--line); margin-top:44px;}
.share-k{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4);}
.share a,.share button{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px;
  letter-spacing:.06em; color:var(--ink-2); border:1px solid var(--line); background:var(--paper);
  padding:9px 14px; border-radius:var(--r-pill); cursor:pointer; transition:.25s var(--ease);}
.share a:hover,.share button:hover{border-color:var(--brand); color:var(--brand);}
.share svg{width:14px; height:14px; fill:currentColor;}

/* ---------- relacionados ---------- */
.rel{background:var(--paper-2); border-top:1px solid var(--line); padding:56px 0; margin-top:56px;}
.rel h3{font-size:22px; font-weight:600; color:var(--ink); letter-spacing:-.02em; margin-bottom:24px;}

/* ---------- pie ---------- */
footer{background:var(--navy); color:#9FB0CC; padding:44px 0; font-size:13.5px;}
footer .wrap{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center;}
footer a{color:#C9D6EE;} footer a:hover{color:#fff;}
.rmark{font-size:.55em; vertical-align:super; opacity:.75;}

@media(max-width:640px){
  body{font-size:15.5px;}
  .blog-head{padding:44px 0 30px;}
  article.cuerpo h2{font-size:22px; margin-top:34px;}
  article.cuerpo p{font-size:16px;}
}