
/* =========================================================
   BLOG SZENDA
   Extiende styles.css sin duplicar la identidad principal.
========================================================= */
.blogPage{background:#fff}
.blogPage nav .links .active{color:var(--blue);font-weight:700}

.blogHero{
  position:relative;overflow:hidden;padding:185px 0 105px;
  background:
    radial-gradient(circle at 83% 34%,rgba(196,218,255,.48) 0 12%,transparent 12.2%),
    linear-gradient(180deg,#fff 0%,#f8fbff 100%);
  border-bottom:1px solid #e8eef7;
}
.blogHeroGrid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .62fr;gap:8vw;align-items:end}
.blogHero h1{font-size:clamp(55px,6.3vw,91px);max-width:900px}
.blogHero p{margin:0 0 8px;color:#637087;font-size:15px;line-height:1.75;max-width:430px}
.blogCurve{position:absolute;fill:none;stroke:#9bbbf6;stroke-width:1.1;pointer-events:none}
.blogCurveOne{width:58%;right:-5%;top:72px}
.blogCurveTwo{width:42%;left:-8%;bottom:-35px;opacity:.7}

.blogContent{padding:55px 0 115px}
.blogFilters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:44px}
.blogFilters button{border:1px solid #dce5f1;background:#fff;color:#596980;padding:9px 14px;border-radius:999px;font:inherit;font-size:10px;font-weight:700;cursor:pointer;transition:.2s}
.blogFilters button:hover,.blogFilters button.is-active{background:#0b5fe8;color:#fff;border-color:#0b5fe8}

.featuredPost{display:grid;grid-template-columns:1.05fr .95fr;min-height:465px;border:1px solid #e1e8f2;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 18px 55px rgba(28,60,113,.07)}
.featuredVisual{position:relative;padding:46px;background:linear-gradient(135deg,#061a3b,#0d3b80);color:#fff;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.featuredVisual:after{content:"";position:absolute;width:430px;height:430px;border:1px solid rgba(115,166,255,.25);border-radius:50%;right:-180px;top:-150px}
.featuredVisual .editorialMark{position:absolute;right:32px;top:25px;font-size:150px;line-height:1;font-weight:800;letter-spacing:-.1em;color:rgba(255,255,255,.035)}
.featuredVisual>span{font-size:9px;font-weight:800;letter-spacing:.17em;color:#79a9ff}
.featuredVisual>strong{position:relative;z-index:2;margin-top:27px;font-size:clamp(48px,5vw,72px);line-height:.89;letter-spacing:-.06em}
.featuredVisual>small{position:absolute;left:46px;bottom:38px;color:#8ca6cd;font-size:8px;letter-spacing:.14em}
.featuredCopy{padding:55px;display:flex;flex-direction:column;justify-content:center}
.postMeta{display:flex;align-items:center;gap:12px;color:#8793a6;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.postMeta span{color:#0b60e7}
.featuredCopy h2{margin:22px 0 18px;color:var(--navy);font-size:clamp(34px,3.5vw,52px);line-height:1.02;letter-spacing:-.045em}
.featuredCopy p{margin:0;color:var(--muted);font-size:14px;line-height:1.75}
.readMore,.postBody>a{display:inline-flex;align-items:center;gap:22px;width:max-content;margin-top:30px;color:#0b55bd;font-size:11px;font-weight:800;border-bottom:1px solid #b8c9df;padding-bottom:7px}

.blogSectionHead{display:grid;grid-template-columns:1fr .7fr;gap:7vw;align-items:end;margin:100px 0 38px}
.blogSectionHead span{font-size:9px;color:#0b60e7;font-weight:800;letter-spacing:.16em}
.blogSectionHead h2{margin:12px 0 0;color:var(--navy);font-size:clamp(37px,4vw,58px);line-height:1;letter-spacing:-.05em}
.blogSectionHead p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}

.postGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.postCard{border:1px solid #e1e8f2;border-radius:14px;overflow:hidden;background:#fff;transition:.25s}
.postCard:hover{transform:translateY(-4px);box-shadow:0 18px 45px rgba(28,60,113,.08)}
.postVisual{height:235px;position:relative;padding:28px;background:#f3f7fd;color:#0a285d;overflow:hidden}
.postBody{padding:27px}
.postBody h3{margin:17px 0 12px;color:var(--navy);font-size:21px;line-height:1.14;letter-spacing:-.035em}
.postBody p{margin:0;color:var(--muted);font-size:12px;line-height:1.65}
.postBody>a{margin-top:22px}

.visualFunnel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.visualFunnel span{width:75%;text-align:center;padding:8px;background:#fff;border:1px solid #d9e4f3;border-radius:5px;font-size:8px;font-weight:800;letter-spacing:.1em}
.visualFunnel span:nth-of-type(2){width:62%}.visualFunnel span:nth-of-type(3){width:49%}.visualFunnel span:nth-of-type(4){width:36%}
.visualFunnel i{height:8px;border-left:1px solid #8eadd9}

.visualWeb{display:flex;flex-direction:column;justify-content:space-between}
.visualWeb strong,.visualAuto strong{font-size:25px;line-height:1;letter-spacing:-.04em}
.miniBrowser{width:75%;height:100px;background:#fff;border:1px solid #d9e3ef;border-radius:7px;padding:13px;box-shadow:0 13px 30px rgba(27,58,108,.08)}
.miniBrowser b{display:block;width:8px;height:8px;border-radius:50%;background:#1768ed;margin-bottom:13px}
.miniBrowser span{display:block;height:7px;background:#e4eaf3;margin:7px 0}.miniBrowser span:nth-of-type(1){width:72%}.miniBrowser span:nth-of-type(2){width:45%}
.miniBrowser em{display:block;width:55px;height:18px;background:#0b60e7;border-radius:3px;margin-top:13px}

.visualAuto{display:flex;flex-direction:column;justify-content:space-between;background:#092451;color:#fff}
.autoFlow{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.autoFlow span{padding:8px 9px;border:1px solid rgba(255,255,255,.22);border-radius:5px;font-size:7px;font-weight:800;letter-spacing:.08em}
.autoFlow b{color:#6fa2ff}

.blogPost.is-hidden{display:none!important}

.blogCta{padding:75px 0;background:#0b5fe8;color:#fff}
.blogCtaGrid{display:flex;justify-content:space-between;align-items:center;gap:45px}
.blogCta span{font-size:9px;font-weight:800;letter-spacing:.16em;color:#bed4ff}
.blogCta h2{margin:13px 0 0;font-size:clamp(38px,4vw,58px);line-height:1;letter-spacing:-.05em}
.blogCta a{flex:0 0 auto;display:flex;align-items:center;gap:24px;border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:15px 19px;font-size:11px;font-weight:700}

@media(max-width:900px){
  .blogHeroGrid,.featuredPost,.blogSectionHead{grid-template-columns:1fr}
  .blogHero{padding:150px 0 80px}.blogHeroGrid{gap:30px}
  .postGrid{grid-template-columns:1fr 1fr}
  .featuredVisual{min-height:390px}
}
@media(max-width:560px){
  .blogHero{padding:125px 0 65px}.blogHero h1{font-size:48px}
  .blogContent{padding:38px 0 80px}
  .featuredCopy{padding:31px 25px}.featuredVisual{padding:30px;min-height:330px}
  .featuredVisual>small{left:30px;bottom:28px}
  .blogSectionHead{margin:70px 0 30px}
  .postGrid{grid-template-columns:1fr}
  .postVisual{height:210px}
  .blogCtaGrid{display:block}.blogCta a{margin-top:30px;width:max-content}
}
