/* ═══════════════════════════════════════════════════════════════
   TIKEXPERTS · BLOG «HacIA la Tierra Promptmetida» — blog.css v1
   Mismo sistema de diseño de index.html: navy/ink para impacto,
   "papel de ingeniería" claro para la lectura larga, naranja solo
   para acción. El blog funciona sin JavaScript (CSP script-src none).
   ═══════════════════════════════════════════════════════════════ */
:root{
  --navy:#142849; --navy-2:#0A1428; --ink:#060B16; --spark:#E85028; --ember:#FF8A3D;
  --fg:#EAF0FA; --muted:#93A4C1; --line:rgba(147,164,193,.16); --line2:rgba(147,164,193,.09);
  --card:rgba(10,20,40,.55);
  --paper:#F1F4FA; --paper-fg:#10203E; --paper-muted:#4E5F7E; --paper-line:rgba(16,32,62,.14);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:ui-monospace,'SFMono-Regular','Cascadia Code',Menlo,monospace;
  --wrap:min(1240px,90vw); --txt:min(760px,90vw); --radius:18px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:90px; }
body{
  margin:0; background:var(--ink); color:var(--fg); font-family:var(--font);
  font-size:clamp(.96rem,1.1vw,1.04rem); line-height:1.65; letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--spark); color:#fff; }
:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; border-radius:4px; }
.wrap{ width:var(--wrap); margin-inline:auto; }
.wrap--txt{ width:var(--txt); }
.skip{ position:absolute; left:-9999px; top:0; z-index:1000; background:var(--spark); color:#fff; padding:12px 20px; border-radius:0 0 10px 0; font-weight:600; }
.skip:focus{ left:0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin:0;
  font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--spark); flex:none; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border:0; border-radius:100px;
  background:var(--spark); color:#fff; font-weight:600; font-size:.92rem; cursor:pointer;
  box-shadow:0 10px 34px -14px rgba(232,80,40,.9); transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 18px 44px -14px rgba(232,80,40,1); }
.btn svg{ width:16px; height:16px; transition:transform .35s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn--sm{ padding:10px 20px; font-size:.84rem; }
.btn--ghost{ background:transparent; color:inherit; border:1px solid var(--line); box-shadow:none; }
.btn--ghost:hover{ border-color:var(--muted); box-shadow:none; }

/* ---------- Navegación ---------- */
.bnav{ position:sticky; top:0; z-index:50; background:rgba(6,11,22,.86); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); border-bottom:1px solid var(--line2); }
.bnav__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:13px 0; }
.bnav__logo img{ height:clamp(28px,3.2vw,36px); width:auto; }
.bnav__menu{ display:flex; align-items:center; gap:clamp(12px,2vw,28px); }
.bnav__link{ font-size:.88rem; font-weight:500; color:var(--muted); transition:color .25s; white-space:nowrap; }
.bnav__link:hover{ color:var(--fg); }
@media (max-width:760px){ .bnav__link{ display:none; } }

/* ---------- Miga de pan ---------- */
.miga{ display:flex; flex-wrap:wrap; gap:8px; font-size:.78rem; color:var(--muted); margin-bottom:22px; }
.miga a:hover{ color:var(--ember); }

/* ---------- Listado ---------- */
.lhero{ padding:clamp(56px,8vw,110px) 0 clamp(40px,5vw,64px); background:radial-gradient(900px 500px at 85% -10%,rgba(232,80,40,.16),transparent 60%),linear-gradient(180deg,var(--ink),rgba(20,40,73,.35)); }
.lhero__in{ display:flex; align-items:stretch; gap:clamp(20px,3vw,40px); }
.lhero__ceo{ flex:none; margin:0; width:clamp(130px,15vw,208px); display:flex; flex-direction:column; text-align:center; }
.lhero__ceo img{ flex:1; width:100%; min-height:0; object-fit:cover; object-position:top center; border-radius:14px; border:1px solid rgba(147,164,193,.25); outline:2px solid rgba(232,80,40,.55); outline-offset:4px; }
.lhero__ceo figcaption{ margin-top:14px; font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); line-height:1.6; }
.lhero h1{ font-size:clamp(2.2rem,5vw,4rem); font-weight:800; letter-spacing:-.045em; line-height:1.02; margin:16px 0; text-wrap:balance; }
.lead{ color:var(--muted); font-size:clamp(1.02rem,1.45vw,1.24rem); line-height:1.6; margin:0; max-width:60ch; }
@media (max-width:560px){ .lhero__in{ flex-direction:column; } .lhero__ceo{ width:130px; } .lhero__ceo img{ flex:none; height:160px; } }
.lgrid{ padding:clamp(30px,4vw,56px) 0 clamp(80px,9vw,130px); }
.vacio{ color:var(--muted); grid-column:1/-1; }

/* ---------- Tarjetas ---------- */
.posts{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:22px; }
.post{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--card); transition:transform .5s var(--ease), border-color .4s; }
.post:hover{ transform:translateY(-5px); border-color:rgba(232,80,40,.45); }
.post__img{ display:block; aspect-ratio:16/10; overflow:hidden; }
.post__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.post:hover .post__img img{ transform:scale(1.05); }
.ph{ display:block; width:100%; height:100%; background:
  linear-gradient(rgba(147,164,193,.1) 1px,transparent 1px) 0 0/34px 34px,
  linear-gradient(90deg,rgba(147,164,193,.1) 1px,transparent 1px) 0 0/34px 34px,
  radial-gradient(circle at 50% 45%,rgba(232,80,40,.35),transparent 30%),
  linear-gradient(135deg,var(--navy),var(--navy-2)); }
.post__body{ display:flex; flex-direction:column; gap:10px; padding:22px; flex:1; }
.post__meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.tag{ padding:4px 10px; border-radius:100px; border:1px solid var(--line); }
.tag--ig{ border-color:transparent; background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); color:#fff; }
.tag--li{ border-color:transparent; background:#0A66C2; color:#fff; }
.tag--tt{ border-color:transparent; background:linear-gradient(45deg,#25F4EE,#000,#FE2C55); color:#fff; }
.tag--yt{ border-color:transparent; background:#FF0000; color:#fff; }
.post h3{ font-size:1.12rem; font-weight:700; letter-spacing:-.025em; margin:0; line-height:1.35; }
.post h3 a::after{ content:''; position:absolute; inset:0; }      /* toda la tarjeta es clicable */
.post{ position:relative; }
.post p{ color:var(--muted); font-size:.9rem; margin:0; flex:1; }
.post__link{ display:inline-flex; align-items:center; gap:7px; font-size:.86rem; font-weight:600; color:var(--spark); margin-top:6px; }
.post__link svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.post:hover .post__link svg{ transform:translateX(4px); }

/* ---------- Artículo: cabecera oscura ---------- */
.ahero{ padding:clamp(48px,7vw,96px) 0 clamp(90px,11vw,150px); background:radial-gradient(900px 500px at 90% -10%,rgba(232,80,40,.16),transparent 60%),linear-gradient(180deg,var(--ink),var(--navy-2)); }
.ahero h1{ font-size:clamp(2rem,4.6vw,3.5rem); font-weight:800; letter-spacing:-.042em; line-height:1.06; margin:16px 0 18px; text-wrap:balance; }
.ameta{ display:flex; align-items:center; gap:14px; margin-top:28px; padding-top:22px; border-top:1px solid var(--line2); }
.ameta img{ width:48px; height:48px; border-radius:10px; object-fit:cover; object-position:top center; border:1px solid var(--line); }
.ameta b{ display:block; font-size:.92rem; }
.ameta span{ font-size:.8rem; color:var(--muted); }

/* La portada monta sobre la unión cabecera/papel: el papel sube
   exactamente media portada por detrás (cálculo según su tamaño real) */
.art{ --cw:min(1040px,90vw); --ch:calc(var(--cw) * .625); background:var(--navy-2); }
.acover{ margin:clamp(-120px,-8vw,-60px) auto 0; position:relative; z-index:2; border-radius:clamp(14px,2vw,22px); overflow:hidden; border:1px solid var(--line); box-shadow:0 40px 90px -40px rgba(0,0,0,.9); width:var(--cw); aspect-ratio:16/10; background:var(--navy); }
.acover img{ width:100%; height:100%; object-fit:cover; }
.acover--none{ height:0; border:0; box-shadow:none; margin-top:0; aspect-ratio:auto; }

/* ---------- Artículo: papel de lectura ---------- */
.papel{
  background:linear-gradient(rgba(16,32,62,.03) 1px,transparent 1px) 0 0/52px 52px,
             linear-gradient(90deg,rgba(16,32,62,.03) 1px,transparent 1px) 0 0/52px 52px,var(--paper);
  color:var(--paper-fg); margin-top:calc(var(--ch) * -.5); padding:calc(var(--ch) * .5 + clamp(44px,6vw,80px)) 0 clamp(70px,8vw,110px);
}
.acover--none + .papel{ margin-top:0; padding-top:clamp(56px,7vw,90px); }
.alayout{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:clamp(30px,5vw,70px); align-items:start; }
.alayout--solo{ grid-template-columns:minmax(0,1fr); width:var(--txt); }
.alayout__side{ position:sticky; top:96px; }
.alayout__main{ max-width:760px; min-width:0; }
@media (max-width:1024px){ .alayout{ grid-template-columns:minmax(0,1fr); width:var(--txt); } .alayout__side{ position:static; } }

.indice{ border:1px solid var(--paper-line); border-radius:14px; background:#fff; padding:18px 18px 12px; }
.indice p{ margin:0 0 10px; font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--paper-muted); }
.indice ol{ margin:0; padding-left:18px; display:grid; gap:8px; font-size:.86rem; }
.indice a{ color:var(--paper-fg); }
.indice a:hover{ color:var(--spark); }
.indice li::marker{ color:var(--spark); font-weight:700; }

/* Tipografía de lectura */
.prosa{ font-size:clamp(1.02rem,1.2vw,1.1rem); line-height:1.8; }
.prosa > *:first-child{ margin-top:0; }
.prosa p{ margin:0 0 1.25em; }
.prosa h2{ font-size:clamp(1.45rem,2.4vw,1.9rem); font-weight:800; letter-spacing:-.035em; line-height:1.18; margin:2.1em 0 .7em; }
.prosa h3{ font-size:clamp(1.18rem,1.8vw,1.38rem); font-weight:700; letter-spacing:-.025em; line-height:1.25; margin:1.8em 0 .6em; }
.prosa h4{ font-size:1.05rem; font-weight:700; margin:1.6em 0 .5em; }
.prosa h2::before{ content:''; display:block; width:34px; height:3px; background:var(--spark); border-radius:3px; margin-bottom:14px; }
.prosa a{ color:#C8401C; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.prosa a:hover{ color:var(--spark); }
.prosa strong{ font-weight:700; color:#0A1731; }
.prosa ul,.prosa ol{ margin:0 0 1.35em; padding-left:1.4em; }
.prosa li{ margin:.4em 0; }
.prosa li > ul,.prosa li > ol{ margin:.3em 0 0; }
.prosa ul li::marker{ color:var(--spark); }
.prosa ol li::marker{ color:var(--spark); font-weight:700; }
.prosa blockquote{ margin:1.8em 0; padding:18px 24px; border-left:3px solid var(--spark); background:#fff; border-radius:0 14px 14px 0; font-size:1.08em; color:#1C2D4D; }
.prosa blockquote p{ margin:0; }
.prosa code{ font-family:var(--mono); font-size:.86em; background:rgba(16,32,62,.07); border:1px solid var(--paper-line); padding:.12em .4em; border-radius:6px; }
.prosa pre{ margin:1.6em 0; padding:20px 22px; background:var(--ink); color:#DDE6F5; border-radius:14px; overflow-x:auto; font-size:.86rem; line-height:1.65; }
.prosa pre code{ background:none; border:0; padding:0; font-size:inherit; color:inherit; }
.prosa hr{ border:0; height:1px; background:var(--paper-line); margin:2.4em 0; }
.prosa .fig{ margin:2em 0; }
.prosa .fig img{ border-radius:14px; border:1px solid var(--paper-line); box-shadow:0 24px 50px -30px rgba(16,32,62,.45); width:100%; }
.prosa figcaption{ margin-top:10px; font-size:.82rem; color:var(--paper-muted); text-align:center; }
.prosa .tabla{ overflow-x:auto; margin:1.8em 0; border:1px solid var(--paper-line); border-radius:14px; background:#fff; }
.prosa table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.prosa th,.prosa td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--paper-line); vertical-align:top; }
.prosa th{ background:rgba(16,32,62,.05); font-weight:700; }
.prosa tr:last-child td{ border-bottom:0; }

.compartir{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:2.6em 0 0; padding-top:24px; border-top:1px solid var(--paper-line); font-size:.86rem; }
.compartir span{ font-weight:700; color:var(--paper-muted); margin-right:6px; }
.compartir a{ padding:7px 14px; border:1px solid var(--paper-line); border-radius:100px; background:#fff; font-weight:600; transition:border-color .25s, color .25s; }
.compartir a:hover{ border-color:var(--spark); color:var(--spark); }

.autor{ display:flex; gap:22px; align-items:flex-start; margin-top:36px; padding:24px; background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius); }
.autor img{ width:112px; height:140px; object-fit:cover; object-position:top center; border-radius:12px; flex:none; }
.autor .eyebrow{ color:var(--paper-muted); }
.autor h2{ font-size:1.15rem; margin:8px 0 6px; letter-spacing:-.02em; }
.autor p{ margin:0; font-size:.92rem; color:var(--paper-muted); }
@media (max-width:560px){ .autor{ flex-direction:column; } .autor img{ width:96px; height:120px; } }

.cta{ display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between; margin-top:22px; padding:clamp(24px,3vw,34px); border-radius:var(--radius); color:var(--fg); background:radial-gradient(420px 260px at 100% 0,rgba(232,80,40,.3),transparent 70%),linear-gradient(140deg,var(--navy),var(--navy-2)); }
.cta h2{ font-size:clamp(1.3rem,2.4vw,1.7rem); letter-spacing:-.03em; margin:10px 0 8px; }
.cta p{ margin:0; color:var(--muted); max-width:46ch; font-size:.94rem; }

.relac{ padding:clamp(60px,7vw,100px) 0; background:linear-gradient(180deg,var(--ink),rgba(20,40,73,.4)); }
.relac .eyebrow{ margin-bottom:26px; }
.relac__todo{ margin:34px 0 0; text-align:center; }

/* ---------- Error ---------- */
.err{ padding:clamp(90px,12vw,160px) 0; }
.err h1{ font-size:clamp(1.9rem,4vw,3rem); letter-spacing:-.04em; margin:16px 0 12px; }
.err p{ color:var(--muted); max-width:56ch; margin:0 0 28px; }

/* ---------- Pie ---------- */
.bfoot{ border-top:1px solid var(--line2); padding:clamp(44px,5vw,64px) 0 30px; background:linear-gradient(180deg,var(--ink),rgba(20,40,73,.35)); }
.bfoot__top{ display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; align-items:flex-start; }
.bfoot__logo{ height:34px; width:auto; }
.bfoot__slogan{ margin:10px 0 0; font-size:.82rem; font-weight:600; letter-spacing:.06em; color:var(--ember); }
.bfoot__links{ display:flex; flex-wrap:wrap; gap:14px 24px; font-size:.88rem; color:var(--muted); }
.bfoot__links a:hover{ color:var(--spark); }
.bfoot__legal{ margin:34px 0 0; padding-top:20px; border-top:1px solid var(--line2); font-size:.8rem; color:var(--muted); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.001ms !important; scroll-behavior:auto !important; }
}