/* ============================================================
   Radar IA · blog de RIIA Business
   Hereda los tokens y componentes de /styles.css (nav, foot,
   btn, tag, wrap). Todo lo propio vive bajo body.blog.
   Portada oscura (violeta/magenta) · lectura en claro.
   ============================================================ */

/* ---------- 0. base ---------- */
.blog main{ overflow-x:clip; }
.blog [data-cat="ia-en-empresas"]{ --cat:var(--violet-hi); --cat-rgb:167,139,250; }
.blog [data-cat="automatizacion"]{ --cat:var(--blue);      --cat-rgb:59,123,255; }
.blog [data-cat="estrategia"]{     --cat:var(--magenta);   --cat-rgb:230,61,208; }
.blog [data-cat="casos"]{          --cat:var(--buho);      --cat-rgb:47,220,160; }
.blog [data-cat="sorprendente"]{   --cat:var(--zorro);     --cat-rgb:242,104,60; }
.blog{ --cat:var(--violet-hi); --cat-rgb:167,139,250; }

/* red de seguridad: si el JS de apariciones no llega, todo se ve */
html.reveal-todo .reveal{ opacity:1 !important; transform:none !important; }

.blog .nav__menu a.is-current{ color:var(--white); }
.blog .skip:focus{ top:16px; }

/* ---------- 1. hero editorial ---------- */
.bhero{
  position:relative; isolation:isolate;
  padding:clamp(7.5rem,15vw,11.5rem) 0 clamp(3rem,6vw,4.5rem);
  background:var(--ink);
}
.bhero__fx{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.bhero__fx::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 100%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 100%);
}
.bhero__fx::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:40%;
  background:linear-gradient(to bottom, transparent, var(--ink));
}
.bhero__orb{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.55;
  animation:orb 16s ease-in-out infinite alternate;
}
.bhero__orb--a{ width:52vw; height:52vw; max-width:760px; max-height:760px; left:-14vw; top:-22vw; background:radial-gradient(circle, rgba(139,92,246,.55), transparent 62%); }
.bhero__orb--b{ width:44vw; height:44vw; max-width:640px; max-height:640px; right:-12vw; top:-4vw; background:radial-gradient(circle, rgba(230,61,208,.42), transparent 62%); animation-delay:-8s; }
@keyframes orb{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(4vw,3vw,0) scale(1.08); } }

.bhero__kicker{ margin-bottom:1.5rem; }
.bhero__name{
  font-size:clamp(3rem, 9.5vw, 7rem); letter-spacing:-.045em; line-height:.96;
  color:var(--white); margin-bottom:1.1rem;
}
.bhero__name em{
  font-style:normal;
  background:linear-gradient(96deg, var(--violet-hi) 0%, var(--magenta) 62%, var(--blue) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.bhero__bajada{
  font-family:var(--f-display); font-weight:600; letter-spacing:-.02em; line-height:1.2;
  font-size:clamp(1.15rem, 2.2vw, 1.55rem); color:var(--white); max-width:24ch;
}
.bhero__lede{
  margin-top:1.4rem; max-width:56ch; color:var(--soft); font-weight:300;
  font-size:clamp(1rem, 1.35vw, 1.15rem); line-height:1.65;
}
.bhero__linea{
  margin-top:clamp(2.5rem,5vw,3.5rem); height:1px;
  background:linear-gradient(90deg, rgba(167,139,250,.75), rgba(230,61,208,.4) 45%, transparent 90%);
}

/* ---------- 2. meta y categoría ---------- */
.bmeta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem .55rem;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.bmeta b{ font-weight:500; color:var(--soft); }
.bmeta i{ font-style:normal; opacity:.45; }
.bmeta__foto{ width:26px; height:26px; border-radius:50%; overflow:hidden; flex:none; box-shadow:0 0 0 1px var(--line-2); }
.bmeta__foto img{ width:100%; height:100%; object-fit:cover; }
.bcat{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cat);
}
.bcat::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--cat); box-shadow:0 0 12px var(--cat); }

/* ---------- 3. destacado ---------- */
.bdest-sec{ padding:clamp(1.5rem,3vw,2.5rem) 0 clamp(2rem,4vw,3rem); background:var(--ink); }
.bdest__label{ margin-bottom:1.1rem; }
.bdest{
  position:relative; display:grid; overflow:hidden; border-radius:22px;
  background:linear-gradient(160deg, var(--graphite-2), var(--graphite));
  box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
}
.bdest::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(var(--cat-rgb),0); transition:box-shadow .55s var(--ease);
}
.bdest:hover{ transform:translateY(-4px); box-shadow:inset 0 0 0 1px var(--line-2), 0 34px 70px -40px rgba(var(--cat-rgb),.55); }
.bdest:hover::after{ box-shadow:inset 0 0 0 1px rgba(var(--cat-rgb),.45); }
.bdest__img{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--graphite); }
.bdest__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.bdest:hover .bdest__img img{ transform:scale(1.04); }
.bdest__body{ padding:clamp(1.4rem,3vw,2.4rem); display:flex; flex-direction:column; gap:.95rem; }
.bdest__t{ font-size:clamp(1.5rem,3.1vw,2.35rem); letter-spacing:-.035em; line-height:1.06; color:var(--white); }
.bdest__t a::after{ content:""; position:absolute; inset:0; z-index:1; }   /* toda la tarjeta abre */
.bdest__x{ color:var(--soft); font-weight:300; font-size:clamp(.98rem,1.25vw,1.08rem); line-height:1.6; max-width:52ch; }
.bdest__leer{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:.3rem;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cat);
}
.bdest__leer svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .4s var(--ease); }
.bdest:hover .bdest__leer svg{ transform:translateX(4px); }
@media (min-width:900px){
  .bdest{ grid-template-columns:1.15fr 1fr; }
  .bdest__img{ aspect-ratio:auto; min-height:420px; }
  .bdest__body{ justify-content:center; }
}

/* ---------- 4. filtros ---------- */
.bfiltros-sec{ background:var(--ink); padding:.5rem 0 1.5rem; }
.bfiltros{ display:flex; flex-wrap:wrap; gap:.5rem; }
.bfiltro{
  appearance:none; border:1px solid var(--line-2); background:transparent; color:var(--soft);
  border-radius:100px; padding:.62rem 1rem; cursor:pointer; min-height:40px;
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.5rem;
  transition:color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
.bfiltro i{ font-style:normal; font-size:.58rem; color:var(--muted); }
.bfiltro:hover{ color:var(--white); border-color:var(--cat, var(--violet-hi)); transform:translateY(-1px); }
.bfiltro.is-on{ color:var(--ink); background:var(--white); border-color:var(--white); }
.bfiltro.is-on i{ color:var(--ink); opacity:.6; }

/* ---------- 5. cuadrícula ---------- */
.bgrid-sec{ background:var(--ink); padding:0 0 clamp(3.5rem,7vw,5.5rem); }
.bgrid{ display:grid; gap:clamp(1rem,2vw,1.4rem); grid-template-columns:1fr; }
@media (min-width:640px){ .bgrid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .bgrid{ grid-template-columns:repeat(3,1fr); } }
.bcard{
  position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:18px;
  background:var(--graphite); box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), background-color .5s var(--ease);
}
.bcard:hover{ transform:translateY(-5px); background:var(--graphite-2); box-shadow:inset 0 0 0 1px rgba(var(--cat-rgb),.45), 0 28px 56px -36px rgba(var(--cat-rgb),.5); }
.bcard__img{ aspect-ratio:16/9; overflow:hidden; background:var(--graphite-2); }
.bcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.bcard:hover .bcard__img img{ transform:scale(1.05); }
.bcard__body{ display:flex; flex-direction:column; gap:.7rem; padding:1.15rem 1.25rem 1.3rem; flex:1; }
.bcard__t{ font-size:1.18rem; letter-spacing:-.028em; line-height:1.15; color:var(--white); }
.bcard__t a::after{ content:""; position:absolute; inset:0; z-index:1; }
.bcard__x{ color:var(--soft); font-weight:300; font-size:.93rem; line-height:1.55; flex:1; }
.bcard__meta{ margin-top:.2rem; }
.bcard[hidden]{ display:none; }
.bvacio{
  margin-top:1.5rem; padding:1.6rem; border-radius:16px; border:1px dashed var(--line-2);
  color:var(--soft); text-align:center; font-weight:300;
}
.bvacio b{ display:block; color:var(--white); font-family:var(--f-display); font-weight:700; margin-bottom:.3rem; }

/* ---------- 6. artículo · cabecera (oscura) ---------- */
.post__cab{
  position:relative; isolation:isolate; padding-top:clamp(7rem,14vw,10.5rem);
  background:var(--ink); overflow:hidden;
}
.post__cab::before{
  content:""; position:absolute; z-index:-1; left:50%; top:-10%; width:70vw; height:60vh; max-width:1000px;
  transform:translateX(-50%); border-radius:50%; filter:blur(90px); opacity:.42;
  background:radial-gradient(circle, rgba(var(--cat-rgb),.5), transparent 62%);
}
.post__cab .wrap{ max-width:880px; }
.bmiga, .post__miga{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:1.4rem;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.bmiga a{ color:var(--soft); transition:color .3s var(--ease); }
.bmiga a:hover{ color:var(--violet-hi); }
.bmiga span[aria-hidden]{ opacity:.4; }
.post__t{ margin-top:.9rem; font-size:clamp(1.9rem,4.4vw,3.3rem); letter-spacing:-.038em; line-height:1.04; color:var(--white); }
.post__bajada{ margin-top:1.1rem; color:var(--soft); font-weight:300; font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.6; max-width:60ch; }
.post__meta{ margin-top:1.4rem; }
.post__meta .bmeta__foto{ width:34px; height:34px; }
.post__hero{ padding:clamp(2rem,4vw,3rem) var(--pad) 0; }
.post__hero figure{ margin:0 auto; max-width:1100px; border-radius:20px; overflow:hidden; box-shadow:0 40px 80px -40px rgba(0,0,0,.9), inset 0 0 0 1px var(--line); background:var(--graphite); }
.post__hero img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.post__cab::after{ content:""; display:block; height:clamp(2.5rem,6vw,4.5rem); }

/* ---------- 7. artículo · cuerpo (claro) ---------- */
.post__cuerpo{
  background:#FBFAF7; color:#1D1B24;
  margin-top:calc(-1 * clamp(2.5rem,6vw,4.5rem));
  padding:clamp(5.5rem,11vw,8rem) var(--pad) clamp(3rem,6vw,4.5rem);
  position:relative; z-index:0;
}
.post__prosa{ max-width:720px; margin-inline:auto; }
.post__prosa > *{ margin:0 0 1.4rem; }
.post__prosa p{ font-size:clamp(1.05rem,1.35vw,1.17rem); line-height:1.78; font-weight:400; color:#2A2833; }
.post__prosa p:first-child{ font-size:clamp(1.12rem,1.5vw,1.26rem); color:#1D1B24; }
.post__prosa strong{ color:#0F0E15; font-weight:700; }
.post__prosa em{ font-style:italic; }
.post__prosa a{ color:#6A3FE0; text-decoration:underline; text-decoration-color:rgba(106,63,224,.35); text-underline-offset:.16em; text-decoration-thickness:1.5px; transition:color .3s var(--ease), text-decoration-color .3s var(--ease); }
.post__prosa a:hover{ color:#4B27B9; text-decoration-color:#4B27B9; }
.post__prosa h2{ margin:2.6rem 0 1rem; font-size:clamp(1.5rem,2.6vw,2rem); letter-spacing:-.032em; line-height:1.12; color:#0F0E15; scroll-margin-top:96px; }
.post__prosa h3{ margin:2rem 0 .8rem; font-size:clamp(1.18rem,1.8vw,1.4rem); letter-spacing:-.025em; line-height:1.2; color:#0F0E15; }
.post__prosa h4{ margin:1.6rem 0 .6rem; font-size:1.05rem; letter-spacing:-.015em; color:#0F0E15; }
.post__prosa ul, .post__prosa ol{ padding-left:1.35rem; display:grid; gap:.55rem; }
.post__prosa ul{ list-style:none; padding-left:1.4rem; }
.post__prosa ul li{ position:relative; font-size:clamp(1rem,1.3vw,1.1rem); line-height:1.7; color:#2A2833; }
.post__prosa ul li::before{ content:""; position:absolute; left:-1.4rem; top:.78em; width:7px; height:7px; border-radius:50%; background:var(--cat); box-shadow:0 0 8px rgba(var(--cat-rgb),.5); }
.post__prosa ol{ list-style:decimal; }
.post__prosa ol li{ font-size:clamp(1rem,1.3vw,1.1rem); line-height:1.7; color:#2A2833; padding-left:.3rem; }
.post__prosa ol li::marker{ font-family:var(--f-mono); font-size:.85em; color:#6A3FE0; font-weight:500; }
.post__prosa blockquote{
  margin:2rem 0; padding:1.4rem 1.6rem 1.4rem 1.8rem; border-left:3px solid var(--cat);
  background:#F3F0FA; border-radius:0 16px 16px 0;
}
.post__prosa blockquote p{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.15rem,1.7vw,1.4rem); letter-spacing:-.022em; line-height:1.35; color:#1D1B24; margin:0; }
.post__prosa blockquote p + p{ margin-top:.8rem; }
.post__prosa figure{ margin:2.2rem 0; }
.post__prosa figure img{ width:100%; height:auto; border-radius:16px; box-shadow:0 24px 50px -30px rgba(0,0,0,.35); }
.post__prosa figcaption{ margin-top:.7rem; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:#7A7889; }
.post__prosa code{ font-family:var(--f-mono); font-size:.88em; background:#EFECF4; padding:.1em .4em; border-radius:6px; color:#1D1B24; }
.post__prosa hr{ border:0; height:1px; background:#E7E3EE; margin:2.6rem 0; }
.post__destacado{
  margin:2.4rem 0; padding:1.5rem 1.7rem 1.6rem; border-radius:18px; position:relative; overflow:hidden;
  background:linear-gradient(135deg, #0E1119, #191433); color:var(--white);
  box-shadow:0 28px 60px -34px rgba(24,16,48,.8);
}
.post__destacado::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(to bottom, var(--violet-hi), var(--magenta)); }
.post__clave{ display:block; margin-bottom:.6rem; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--violet-hi); }
.post__destacado p{ color:var(--white); font-family:var(--f-display); font-weight:600; font-size:clamp(1.08rem,1.5vw,1.28rem); letter-spacing:-.02em; line-height:1.4; margin:0; }
.post__destacado p + p{ margin-top:.7rem; }
.post__destacado a{ color:var(--violet-hi); }

/* ---------- 8. compartir ---------- */
.post__compartir{
  max-width:720px; margin:3rem auto 0; padding-top:1.6rem; border-top:1px solid #E7E3EE;
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
}
.post__compartir > span{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:#7A7889; margin-right:.4rem; }
.post__red{
  display:grid; place-items:center; width:44px; height:44px; border-radius:12px;
  border:1px solid #E3DFEA; color:#4A4858; background:#fff;
  transition:color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.post__red svg{ width:18px; height:18px; fill:currentColor; }
.post__red:hover{ color:#6A3FE0; border-color:#6A3FE0; transform:translateY(-2px); box-shadow:0 10px 24px -14px rgba(106,63,224,.55); }

/* ---------- 9. autor ---------- */
.post__autor{
  max-width:720px; margin:2.2rem auto 0; padding:1.4rem 1.5rem; border-radius:18px;
  background:#F4F1FA; border:1px solid #E7E3EE; display:flex; gap:1.2rem; align-items:flex-start;
}
.post__autor__foto{ width:68px; height:68px; border-radius:50%; overflow:hidden; flex:none; box-shadow:0 0 0 3px #fff, 0 0 0 4px #E7E3EE; }
.post__autor__foto img{ width:100%; height:100%; object-fit:cover; }
.post__autor__k{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:#7A7889; }
.post__autor__n{ margin-top:.2rem; font-family:var(--f-display); font-weight:800; font-size:1.15rem; letter-spacing:-.025em; color:#0F0E15; }
.post__autor__c{ font-size:.86rem; color:#6A3FE0; font-weight:600; margin-top:.1rem; }
.post__autor__b{ margin-top:.55rem; font-size:.95rem; line-height:1.6; color:#4A4858; }
.post__autor__b a{ color:#6A3FE0; font-weight:600; }
@media (max-width:520px){ .post__autor{ flex-direction:column; } }

/* ---------- 10. CTA RIIA Business (oscura) ---------- */
.post__cta{ background:var(--ink); padding:clamp(3.5rem,7vw,5.5rem) 0; position:relative; isolation:isolate; overflow:hidden; }
.post__cta::before{
  content:""; position:absolute; z-index:-1; left:50%; top:50%; width:80vw; max-width:1100px; height:70%;
  transform:translate(-50%,-50%); border-radius:50%; filter:blur(90px); opacity:.35;
  background:radial-gradient(circle, rgba(139,92,246,.6), rgba(230,61,208,.3) 50%, transparent 70%);
}
.post__cta__box{
  max-width:820px; margin-inline:auto; text-align:center; padding:clamp(2rem,5vw,3.4rem) clamp(1.3rem,4vw,3rem);
  border-radius:24px; background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px var(--line-2); position:relative;
}
.post__cta__box::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(120deg, rgba(167,139,250,.6), transparent 40%, transparent 60%, rgba(230,61,208,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
}
.post__cta__t{ margin-top:1rem; font-size:clamp(1.6rem,3.6vw,2.6rem); letter-spacing:-.035em; line-height:1.08; color:var(--white); }
.post__cta__t em{ font-style:normal; background:linear-gradient(96deg, var(--violet-hi), var(--magenta)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.post__cta__p{ margin:1rem auto 1.8rem; max-width:52ch; color:var(--soft); font-weight:300; font-size:clamp(1rem,1.3vw,1.12rem); line-height:1.6; }

/* ---------- 11. seguir leyendo ---------- */
.post__mas{ background:var(--ink); padding:0 0 clamp(4rem,8vw,6rem); }
.post__mas__k{ margin-bottom:1.2rem; }

/* ---------- 12. movimiento reducido: sólo lo intrusivo ---------- */
@media (prefers-reduced-motion:reduce){
  .bhero__orb{ animation:none; }
}