/* Roas Seeker · Blog — panel bento + lectura premium. Se carga después de /inner-light.css. */
:root{--hdr:84px}
/* Colores por tema */
.t-agentes{--c:#d4af37;--c-strong:#ffd158;--c-ink:#7a5c0e;--c-soft:#fff6d9;--c-on:#1a1405}
.t-industria{--c:#2e7dff;--c-strong:#2e7dff;--c-ink:#1b4fb8;--c-soft:#e8f0ff;--c-on:#fff}
.t-whatsapp{--c:#1faf6e;--c-strong:#1faf6e;--c-ink:#11704a;--c-soft:#e3f7ee;--c-on:#fff}
.t-automatizacion{--c:#0bb4d6;--c-strong:#38e0ff;--c-ink:#08718a;--c-soft:#e0f7fc;--c-on:#05202a}
.t-modelos{--c:#5b7cff;--c-strong:#0e1730;--c-ink:#2c3f99;--c-soft:#eceff8;--c-on:#fff}
.t-planillas{--c:#ff7a59;--c-strong:#ff7a59;--c-ink:#b4431f;--c-soft:#ffede7;--c-on:#2a0d04}

/* ============ ÍNDICE DEL BLOG ============ */
.blog-index .bx-in{max-width:1220px;margin:0 auto;padding:0 24px}
.bx-hero{padding:56px 0 26px;position:relative}
.bx-hero .crumbs{margin-bottom:26px}
.bx-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:end}
.blog-index h1{font-size:clamp(38px,6.2vw,76px);line-height:1.02;letter-spacing:-.045em;margin:0}
.blog-index h1 .g{color:var(--gold-deep)}
.bx-hero-side .lead{font-size:18px;line-height:1.65;margin:0 0 20px;color:var(--muted)}
.bx-hero-side .meta-row{gap:8px}
.bx-hero-side .meta-row span{background:#fff;border:1px solid var(--line);border-radius:100px;padding:6px 12px;font-size:12.5px;color:var(--navy);font-weight:600}
.bx-hero-side .meta-row span:empty,.bx-hero-side .meta-row .dot{display:none}

/* Cinta de temas en movimiento */
.bx-ticker{margin-top:40px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.bx-ticker-track{display:flex;gap:12px;width:max-content;animation:bxMarquee 38s linear infinite}
.bx-ticker:hover .bx-ticker-track{animation-play-state:paused}
.bx-pill{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:100px;background:var(--c-soft);color:var(--c-ink);font-weight:600;font-size:14px;white-space:nowrap;border:1px solid color-mix(in srgb,var(--c) 25%,transparent)}
.bx-pill i{width:8px;height:8px;border-radius:50%;background:var(--c)}
@keyframes bxMarquee{to{transform:translateX(-50%)}}

/* Barra de filtros */
.bx-bar{position:sticky;top:var(--hdr);z-index:30;padding:14px 0;background:rgba(241,243,245,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.bx-bar.stuck{border-bottom-color:var(--line)}
.bx-bar .bx-in{display:flex;align-items:center;gap:14px}
.bx-filters{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1;padding:2px}
.bx-filters::-webkit-scrollbar{display:none}
.bx-f{font:600 13.5px/1 "Inter",sans-serif;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:100px;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;white-space:nowrap;transition:background-color .25s,color .25s,border-color .25s,transform .2s;text-decoration:none}
.bx-f i{width:8px;height:8px;border-radius:50%;background:var(--c,var(--navy))}
.bx-f small{font-size:11.5px;color:var(--muted-2);font-weight:600}
.bx-f:hover{border-color:var(--c,var(--navy));transform:translateY(-1px);color:var(--navy)}
.bx-f[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.bx-f[aria-pressed="true"] small{color:#b7c0d1}
.bx-f[aria-pressed="true"] i{box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.bx-search{position:relative;flex:0 0 260px}
.bx-search input{width:100%;font:500 14px "Inter",sans-serif;padding:11px 14px 11px 40px;border-radius:100px;border:1px solid var(--line);background:#fff;color:var(--navy);transition:border-color .2s,box-shadow .2s}
.bx-search input::placeholder{color:var(--muted-2)}
.bx-search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(46,125,255,.14)}
.bx-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted-2)}
.bx-count{font-size:13px;color:var(--muted-2);white-space:nowrap;font-weight:500}

/* Grid bento */
.bx-grid-wrap{padding:26px 0 40px}
.bx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(200px,auto);grid-auto-flow:dense;gap:16px}
.s-feature{grid-column:span 2;grid-row:span 2}
.s-wide{grid-column:span 2}
.s-tall{grid-row:span 2}
.bx-grid [hidden]{display:none!important}

/* Tarjeta de tema (marcador de capítulo) */
.bt{position:relative;border-radius:24px;padding:26px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:linear-gradient(165deg,#fff 0%,var(--c-soft) 100%);color:var(--navy);border:1px solid color-mix(in srgb,var(--c) 28%,var(--line));isolation:isolate}
.bt::before{content:"";position:absolute;right:-80px;bottom:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 38%,transparent),transparent 65%);z-index:-1;transition:transform .6s var(--ease)}
.bt::after{content:attr(data-n);position:absolute;right:16px;top:-4px;font-size:118px;font-weight:800;letter-spacing:-.06em;line-height:1;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--c) 60%,transparent);z-index:-1;transition:transform .6s var(--ease)}
.bt:hover::before{transform:scale(1.25) translate(-10px,-10px)}
.bt:hover::after{transform:translateY(8px)}
.bt-num{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--c-ink)}
.bt h2{font-size:clamp(22px,2vw,27px);line-height:1.12;letter-spacing:-.03em;color:var(--navy);margin:14px 0 10px;scroll-margin-top:calc(var(--hdr) + 90px)}
.bt p{font-size:14.5px;line-height:1.5;color:var(--muted);margin:0}
.bt-btn{margin-top:18px;align-self:flex-start;font:600 13px "Inter",sans-serif;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:100px;border:1px solid var(--navy);background:transparent;color:var(--navy);cursor:pointer;transition:background-color .25s,color .25s}
.bt-btn:hover{background:var(--navy);color:#fff}
.bt-btn svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.bt-btn:hover svg{transform:translateX(3px)}

/* Tarjeta de artículo */
.bc{--mx:50%;--my:50%;position:relative;display:flex;flex-direction:column;border-radius:24px;padding:22px;background:#fff;border:1px solid var(--line);color:var(--navy);text-decoration:none;overflow:hidden;isolation:isolate;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.bc::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--c) 18%,transparent),transparent 45%);opacity:0;transition:opacity .35s}
.bc:hover{transform:translateY(-4px);box-shadow:0 22px 50px -18px color-mix(in srgb,var(--c) 45%,rgba(10,16,32,.25));border-color:color-mix(in srgb,var(--c) 45%,var(--line));color:var(--navy)}
.bc:hover::after{opacity:1}
.bc:focus-visible{outline:3px solid var(--c);outline-offset:3px}
.bc.tint{background:var(--c-soft);border-color:transparent}
.bc.solid{background:var(--c-strong);color:var(--c-on);border-color:transparent}
.bc.solid:hover{color:var(--c-on)}
.bc.dark{background:linear-gradient(160deg,#16244a,#0a1020);color:#fff;border-color:transparent}
.bc.dark:hover{color:#fff}
.bc-top{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:2}
.bc-tag{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink)}
.bc-tag i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.bc-time{font-size:12px;font-weight:600;color:var(--muted-2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none}
.bc-time svg{width:13px;height:13px}
.bc.solid .bc-tag,.bc.solid .bc-time{color:var(--c-on);opacity:.85}
.bc.solid .bc-tag i{background:var(--c-on)}
.bc.dark .bc-tag{color:#aab8ff}.bc.dark .bc-time{color:#9aa6bf}
.bc-vis{position:relative;flex:1;min-height:70px;display:flex;align-items:center;justify-content:center;margin:12px 0 6px;pointer-events:none}
.bc-vis svg{width:100%;height:100%;max-height:220px;overflow:visible}
.s-normal .bc-vis,.s-wide .bc-vis{position:absolute;right:14px;top:46px;width:96px;height:72px;margin:0;opacity:.9}
.s-wide .bc-vis{width:150px;height:104px;top:auto;bottom:18px;right:18px}
.bc h3{position:relative;z-index:2;font-size:17px;line-height:1.3;letter-spacing:-.02em;font-weight:700;margin:0 0 8px;color:inherit;text-wrap:balance}
.s-normal h3{margin-top:auto;padding-top:64px;padding-right:0}
.s-wide h3{margin-top:auto;max-width:62%;font-size:21px}
.s-tall h3{font-size:21px}
.s-feature h3{font-size:clamp(24px,2.6vw,32px);line-height:1.12;letter-spacing:-.035em}
.bc p{position:relative;z-index:2;font-size:14px;line-height:1.55;margin:0;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.s-wide p{max-width:62%;-webkit-line-clamp:2}
.s-feature p{font-size:15.5px;-webkit-line-clamp:4;max-width:92%}
.bc.solid p{color:var(--c-on);opacity:.82}
.bc.dark p{color:#b7c0d1}
.bc-cta{position:relative;z-index:2;margin-top:14px;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--c-ink)}
.bc.solid .bc-cta{color:var(--c-on)}
.bc.dark .bc-cta{color:var(--gold-bright)}
.bc-cta svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.bc:hover .bc-cta svg{transform:translateX(5px)}
.bx-empty{text-align:center;color:var(--muted);padding:40px 0;font-size:15px}

/* Ilustraciones SVG (decorativas) */
.va{fill:var(--c)}.vs{fill:color-mix(in srgb,var(--c) 22%,#fff)}.vw{fill:#fff}.vk{fill:var(--navy)}
.vl{stroke:var(--c);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.vck{stroke:#fff!important;stroke-width:3}
.vg{stroke:color-mix(in srgb,var(--c) 35%,transparent);stroke-width:1.5;fill:none}
.bc.solid .va{fill:var(--c-on)}.bc.solid .vs{fill:rgba(255,255,255,.55)}.bc.solid .vl{stroke:var(--c-on)}.bc.solid .vg{stroke:rgba(255,255,255,.45)}
.t-agentes.bc.solid .vs{fill:rgba(255,255,255,.6)}
.bc.dark .vs{fill:rgba(255,255,255,.1)}.bc.dark .vw{fill:#1d2b52}.bc.dark .vk{fill:#fff}
.bc-vis *{transform-box:fill-box;transform-origin:center bottom;transition:transform .6s var(--ease),opacity .6s var(--ease)}
.bc:hover .v-up{transform:translateY(-6px)}
.bc:hover .v-grow{transform:scaleY(1.18)}
.bc:hover .v-grow:nth-child(2n){transform:scaleY(.86)}
.bc:hover .v-spin{transform:rotate(14deg);transform-origin:center}
.bc:hover .v-left{transform:translateX(-6px)}
.bc:hover .v-right{transform:translateX(6px)}
.v-pulse{animation:vPulse 2.6s var(--ease) infinite;transform-origin:center}
.v-blink{animation:vBlink 1.4s ease-in-out infinite}
.v-blink:nth-child(2){animation-delay:.2s}.v-blink:nth-child(3){animation-delay:.4s}
.v-dash{stroke-dasharray:6 6;animation:vDash 1.6s linear infinite}
@keyframes vPulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@keyframes vBlink{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes vDash{to{stroke-dashoffset:-24}}

/* Entrada al hacer scroll (solo con JS) */
.js .rv{opacity:0;transform:translateY(26px) scale(.98);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}

/* Cierre */
.bx-end{padding:10px 0 30px}
.bx-end .callout{max-width:820px;margin:0 auto}
.bx-cta{max-width:1220px;margin:26px auto 0;border-radius:28px;padding:44px 40px;display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center;background:radial-gradient(ellipse 70% 120% at 100% 0%,rgba(255,209,88,.25),transparent 60%),linear-gradient(160deg,#16244a,#0a1020);color:#fff;position:relative;overflow:hidden}
.bx-cta b{display:block;font-size:clamp(24px,3vw,34px);letter-spacing:-.035em;line-height:1.1;margin-bottom:10px}
.bx-cta span{color:#b7c0d1;font-size:15.5px}
.bx-cta .btn{justify-self:end}

/* ============ ARTÍCULO ============ */
.blog-post .hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--c-soft) 0%,rgba(241,243,245,0) 100%);border-bottom:1px solid var(--line)}
.blog-post .hero .wrap,.blog-post .article>.wrap{max-width:1140px}
.blog-post .hero .wrap{position:relative;padding-top:4px;padding-bottom:6px}
.blog-post .hero h1{max-width:min(740px,100%);font-size:clamp(32px,5vw,56px)}
.blog-post .eyebrow{background:#fff;border:1px solid color-mix(in srgb,var(--c) 35%,var(--line));color:var(--c-ink);padding:7px 14px 7px 12px;border-radius:100px;letter-spacing:.14em;font-size:11.5px}
.blog-post .eyebrow::before{width:8px;height:8px;border-radius:50%;background:var(--c)}
.blog-post .crumbs a{color:var(--c-ink)}
.blog-post .meta-row span{display:inline-flex;align-items:center}
.hero-vis{position:absolute;right:24px;top:50%;transform:translateY(-50%);width:300px;height:210px;opacity:.95;pointer-events:none}
.hero-vis svg{width:100%;height:100%;overflow:visible}
.hero-vis::before{content:"";position:absolute;inset:-30% -20%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 30%,transparent),transparent 62%);z-index:-1;filter:blur(10px)}
.blog-post .hero h1,.blog-post .hero .meta-row,.blog-post .hero .crumbs{position:relative;z-index:2}

/* Barra de progreso de lectura */
.rs-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:100;pointer-events:none}
.rs-progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--c),var(--c-strong));transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* Cuerpo */
.blog-post .article{padding-top:48px}
.blog-post .article a{color:var(--c-ink);text-decoration-color:color-mix(in srgb,var(--c) 55%,transparent)}
.blog-post .article a:hover{color:var(--navy);text-decoration-color:var(--c)}
.blog-post .lead{font-size:20px;line-height:1.65;color:var(--navy)!important;border-left:3px solid var(--c);padding-left:20px;margin-bottom:32px!important}
.blog-post .article>.wrap{counter-reset:sec}
.blog-post .article h2:not(:has(+ .related)){counter-increment:sec}
.blog-post .article h2::before{content:counter(sec,decimal-leading-zero);display:block;font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--c-ink);margin-bottom:10px}
.blog-post .article h2:has(+ .related)::before{content:"SIGUE LEYENDO"}
.blog-post .article h2{padding-top:8px;border-top:1px solid var(--line);padding-top:30px;margin-top:52px}
.blog-post .article h3{color:var(--navy)}
.blog-post .article li::before{color:var(--c)}
.blog-post .article ol li::marker{color:var(--c-ink)}
.blog-post .callout{background:var(--c-soft);border:0;border-left:4px solid var(--c);border-radius:16px;box-shadow:none;color:var(--navy);font-size:16px;padding:22px 24px}
.blog-post .article .tbl{border-radius:16px;box-shadow:0 10px 30px -18px rgba(24,40,65,.25)}
.blog-post .article th{background:var(--c-soft);color:var(--navy);font-size:13px;letter-spacing:.02em}
.blog-post .article tbody tr{transition:background-color .2s}
.blog-post .article tbody tr:hover{background:#fafbfc}
.blog-post .article td:first-child{font-weight:600;color:var(--navy)}

/* Layout con índice lateral fijo */
@media(min-width:1100px){
  .blog-post .article>.wrap{display:grid;grid-template-columns:minmax(0,1fr) 270px;column-gap:72px;row-gap:0;align-items:start}
  .blog-post .article>.wrap>*{grid-column:1}
  .blog-post .article>.wrap>.toc{grid-column:2;grid-row:1/span 300;align-self:start;position:sticky;top:calc(var(--hdr) + 24px);margin:0;max-height:calc(100vh - var(--hdr) - 48px);overflow:auto;scrollbar-width:thin}
  .blog-post .article>.wrap>.lead{margin-top:0}
}
@media(max-width:1099px){.hero-vis{display:none}}
.blog-post .toc{padding:20px 20px 16px}
.blog-post .toc b{display:flex;justify-content:space-between;align-items:center}
.blog-post .toc b em{font-style:normal;color:var(--c-ink);letter-spacing:.05em}
.blog-post .toc a{position:relative;padding:8px 0 8px 14px;font-size:14px;line-height:1.4;color:var(--muted)}
.blog-post .toc a::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--line);transition:background-color .25s,transform .25s}
.blog-post .toc a:hover{padding-left:18px;color:var(--navy)}
.blog-post .toc a.on{color:var(--navy);font-weight:600}
.blog-post .toc a.on::before{background:var(--c);transform:scaleY(1.2)}
.rs-share{display:flex;align-items:center;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2);font-size:12px;font-weight:600;color:var(--muted-2);text-transform:uppercase;letter-spacing:.12em}
.rs-share a,.rs-share button{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;padding:0!important;transition:background-color .2s,color .2s,transform .2s,border-color .2s}
.rs-share a::before{content:none!important}
.rs-share a:hover,.rs-share button:hover{background:var(--c-soft);border-color:var(--c);transform:translateY(-2px)}
.rs-share svg{width:15px;height:15px}
.rs-share .ok{background:var(--c);color:#fff;border-color:var(--c)}

/* Artículos relacionados como tarjetas */
.blog-post .related{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.blog-post .related a{position:relative;padding:20px 20px 46px;border-radius:20px;background:var(--c-soft);border:1px solid transparent;color:var(--navy)}
.blog-post .related a::after{content:"Leer guía →";position:absolute;left:20px;bottom:16px;font-size:13px;font-weight:700;color:var(--c-ink);transition:transform .3s var(--ease)}
.blog-post .related a:hover{border-color:var(--c);box-shadow:0 16px 40px -18px color-mix(in srgb,var(--c) 60%,transparent)}
.blog-post .related a:hover::after{transform:translateX(4px)}
.blog-post .related a b{font-size:16px;line-height:1.3;margin-bottom:6px;letter-spacing:-.01em}

/* CTA final insertado */
.rs-endcta{margin:52px 0 10px;border-radius:24px;padding:34px 32px;background:radial-gradient(ellipse 80% 140% at 100% 0%,color-mix(in srgb,var(--c) 35%,transparent),transparent 60%),linear-gradient(160deg,#16244a,#0a1020);color:#fff;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.rs-endcta strong{display:block;font-size:24px;letter-spacing:-.03em;line-height:1.15;color:#fff!important;margin-bottom:6px}
.rs-endcta span{color:#b7c0d1;font-size:15px}
.rs-endcta .btn{color:#1a1405!important;text-decoration:none}

.js .blog-post .rv-a{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .blog-post .rv-a.in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media(max-width:1060px){
  .bx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bx-hero-grid{grid-template-columns:1fr;gap:22px}
  .bx-search{flex-basis:200px}
}
@media(max-width:720px){
  .bx-bar .bx-in{flex-wrap:wrap}
  .bx-search{flex:1 1 100%;order:-1}
  .bx-count{display:none}
  .bx-cta{grid-template-columns:1fr;padding:32px 24px}
  .bx-cta .btn{justify-self:start}
}
@media(max-width:620px){
  .blog-index .bx-in{padding:0 16px}
  .bx-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:12px}
  .s-feature,.s-wide,.s-tall{grid-column:auto;grid-row:auto}
  .bt{min-height:200px}
  .s-feature .bc-vis,.s-tall .bc-vis{height:150px;flex:none}
  .s-wide .bc-vis{width:110px;height:78px;top:46px;bottom:auto;right:14px}
  .s-wide h3,.s-wide p{max-width:none}
  .s-wide h3{padding-top:70px}
  .bc{min-height:210px}
  .bx-ticker{margin-top:28px}
  .blog-post .related{grid-template-columns:1fr}
  .blog-post .lead{font-size:18px}
  .rs-endcta{padding:28px 22px}
}
@media(hover:none){.bc::after{display:none}.bc:hover{transform:none}}
@media(prefers-reduced-motion:reduce){
  .bx-ticker-track,.v-pulse,.v-blink,.v-dash{animation:none!important}
  .js .rv,.js .blog-post .rv-a{opacity:1!important;transform:none!important}
  .bc,.bc *,.bt::before{transition:none!important}
}