/* Certhana Academy — Artículos (centro de aprendizaje).
   Cargado SOLO en /recursos/ y /recursos/categoria/<slug>/.
   landing-course.css (siempre cargado) aporta navbar, footer y el reset base.
   Aquí van tokens + componentes propios, TODO scopeado bajo .blog-page para no
   afectar el navbar/footer compartidos ni las demás páginas. */

.blog-page{
  --clr-primary:#9D2235;
  --clr-primary-hover:#7b1a14;
  --clr-primary-soft:#F6E7E9;
  --clr-gold:#9E5F0C;
  --clr-text-dark:#1F1F1F;
  --clr-text-gray:#3A3537;
  --clr-text-gray-light:#6A6264;
  --clr-bg-white:#ffffff;
  --clr-bg-gray:#F7F4F5;
  --clr-border:#E7E2E3;
  --clr-border-strong:#D2D2D2;
  --clr-blue-light:#E2E8F0;
  --grad-red:linear-gradient(120deg,#c0433d 0%,#9D2235 52%,#7b1a14 100%);
  --radius:8px;
  --shadow-sm:0 1px 2px rgba(22,10,12,.06),0 1px 1px rgba(22,10,12,.04);
  --shadow-md:0 12px 30px -14px rgba(22,10,12,.2);
  --maxw:1140px;

  color:var(--clr-text-dark);
  line-height:1.8;
}
.blog-page *{box-sizing:border-box}
.blog-page h1,.blog-page h2,.blog-page h3{font-weight:700;letter-spacing:-.025em;line-height:1.14}
.blog-page img{max-width:100%;display:block}
.blog-page em{font-style:normal;font-weight:700;background:var(--grad-red);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

.blog-page .container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.blog-page .section--gray{background:var(--clr-bg-gray)}

/* ---------- eyebrow ---------- */
.blog-page .eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--clr-gold);display:inline-flex;align-items:center;gap:12px;line-height:1}
.blog-page .eyebrow::before{content:"";width:26px;height:2px;background:currentColor;display:inline-block;border-radius:2px}

/* ---------- botones ---------- */
.blog-page .button{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:16px;font-weight:600;text-decoration:none;border-radius:var(--radius);padding:14px 26px;cursor:pointer;border:1px solid transparent;box-shadow:var(--shadow-sm);transition:background-color .2s,border-color .2s,transform .2s,box-shadow .2s,color .2s}
.blog-page .button-primary{background:var(--clr-primary);border-color:var(--clr-primary);color:#fff}
.blog-page .button-primary:hover{background:var(--clr-primary-hover);border-color:var(--clr-primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md);text-decoration:none;color:#fff}
.blog-page .button-ghost{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--clr-border-strong);color:var(--clr-primary);font-weight:600;font-size:15px;border-radius:var(--radius);padding:10px 18px;transition:border-color .2s,background-color .2s,color .2s}
.blog-page .button-ghost:hover{border-color:var(--clr-primary);background:var(--clr-primary-soft);text-decoration:none}
.blog-page .arr{transition:transform .2s}
.blog-page .button:hover .arr,.blog-page .button-ghost:hover .arr{transform:translateX(3px)}

/* ---------- breadcrumb ---------- */
.blog-page .breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0;margin:0;font-size:14px}
.blog-page .breadcrumb li{display:inline-flex;align-items:center;color:var(--clr-text-gray-light)}
.blog-page .breadcrumb a{color:var(--clr-text-gray);text-decoration:none}
.blog-page .breadcrumb a:hover{color:var(--clr-primary);text-decoration:underline}
.blog-page .breadcrumb [aria-current]{color:var(--clr-text-gray-light)}

/* ============ HERO (home /recursos/) ============ */
.blog-page .blog-hero{position:relative;overflow:hidden;background:#F3F1F2;padding:56px 0 40px}
.blog-page .blog-hero::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(46% 60% at 16% -6%,rgba(157,34,53,.12),transparent 60%),radial-gradient(46% 60% at 84% 0%,rgba(192,67,61,.12),transparent 60%)}
.blog-page .blog-hero__inner{position:relative;z-index:1;text-align:left}
.blog-page .blog-hero h1{font-size:clamp(32px,4.6vw,52px);line-height:1.1;margin:0;max-width:18ch;color:var(--clr-text-dark)}
.blog-page .blog-hero__sub{margin-top:18px;max-width:54ch;font-size:clamp(16px,1.6vw,18px);color:var(--clr-text-gray);line-height:1.65}

/* ============ HERO (categoría /recursos/categoria/<slug>/) ============ */
.blog-page .cat-hero{position:relative;overflow:hidden;background:#F3F1F2}
.blog-page .cat-hero::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(42% 60% at 10% -10%,rgba(157,34,53,.12),transparent 60%),radial-gradient(48% 66% at 96% 2%,rgba(74,111,165,.16),transparent 62%)}
.blog-page .cat-hero .container{position:relative;z-index:1;padding:40px 24px 48px}
.blog-page .cat-hero h1{font-size:clamp(34px,4.8vw,52px);line-height:1.1;color:var(--clr-text-dark);margin:24px 0 0}
.blog-page .cat-hero__lead{margin:18px 0 0;max-width:62ch;font-size:clamp(16px,1.7vw,18px);color:var(--clr-text-gray);line-height:1.65}

/* ============ TABS (home, scroll horizontal) ============ */
/* top:60px = altura del navbar sticky compartido (.nav-wrapper, top:0). Sin el
   offset, estas tabs sticky quedarían ocultas detrás del navbar al hacer scroll. */
.blog-page .cat-tabs{position:sticky;top:60px;z-index:90;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--clr-border)}
.blog-page .cat-tabs__inner{position:relative}
.blog-page .cat-tabs__scroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:12px 0;scroll-snap-type:x proximity;list-style:none;margin:0}
.blog-page .cat-tabs__scroll::-webkit-scrollbar{display:none}
.blog-page .cat-tab{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:14.5px;font-weight:500;line-height:1.2;color:var(--clr-text-gray);background:#fff;border:1px solid var(--clr-border);border-radius:999px;padding:9px 16px;cursor:pointer;white-space:nowrap;text-decoration:none;transition:border-color .2s,color .2s,background-color .2s}
.blog-page .cat-tab__ico{width:18px;height:18px;flex:none;object-fit:contain}
.blog-page .cat-tab:hover{border-color:var(--clr-primary);color:var(--clr-primary);text-decoration:none}
.blog-page .cat-tab.is-active{background:var(--clr-primary);border-color:var(--clr-primary);color:#fff;font-weight:600}

/* ============ PANEL / CONTENIDO ============ */
.blog-page .cat-panel{padding-top:48px;padding-bottom:8px}
.blog-page .cat-content{padding-top:48px;padding-bottom:72px}

/* destacado (feature) */
.blog-page .feature{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;margin-bottom:64px}
.blog-page .feature__media{display:block;border-radius:8px;overflow:hidden;background:#e6e3e4;aspect-ratio:16/10}
.blog-page .feature__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.blog-page .feature__media:hover img{transform:scale(1.03)}
.blog-page .feature__title{font-size:clamp(24px,3vw,36px);line-height:1.18;margin:16px 0 0}
.blog-page .feature__title a{color:var(--clr-text-dark)}
.blog-page .feature__title a:hover{color:var(--clr-primary);text-decoration:none}
.blog-page .feature__desc{margin-top:16px;font-size:16.5px;color:var(--clr-text-gray);line-height:1.7;max-width:52ch}
.blog-page .feature__meta{margin-top:20px;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--clr-text-gray-light)}
.blog-page .feature__cat{font-weight:600;color:var(--clr-primary)}

/* recomendados / grilla de artículos */
.blog-page .recos__head{margin-bottom:24px}
.blog-page .recos__title,.blog-page .cat-grid__title{font-size:clamp(22px,2.6vw,30px);margin:0}
.blog-page .cat-grid__title{margin:0 0 24px}
.blog-page .cards.related{display:flex;flex-wrap:wrap;gap:16px;list-style:none;padding:0;margin:0}
.blog-page .recos__all{margin-top:24px}
.blog-page .recos__all[hidden]{display:none}
.blog-page .cards.related[hidden]{display:none}
.blog-page .recos__empty{margin:8px 0 0;font-size:16.5px;color:var(--clr-text-gray);line-height:1.6;max-width:52ch}
.blog-page .recos__empty[hidden]{display:none}
.blog-page .related-card{background:#fff;border:1px solid var(--clr-border);border-radius:var(--radius);box-sizing:border-box;flex:1 1 calc(25% - 12px);min-width:0;transition:border-color .2s,transform .2s,box-shadow .2s}
.blog-page .related-card:hover{border-color:var(--clr-primary);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.blog-page .related-card a{display:block;color:inherit;padding:10px}
.blog-page .related-card a:hover{text-decoration:none}
.blog-page .related-card .card-image{border-radius:var(--radius);overflow:hidden}
.blog-page .related-card .card-image img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;background:#e6e3e4}
.blog-page .related-card .course-name{font-size:16px;font-weight:600;color:var(--clr-text-dark);margin:12px 6px 10px;line-height:1.5}
.blog-page .related-card__category{font-size:13.5px;color:var(--clr-text-gray-light);margin:0 6px 6px;display:block}

/* ============ DIRECTORIO DE CATEGORÍAS ============ */
.blog-page .cat-directory{padding:72px 0}
.blog-page .cat-panel + .cat-directory{padding-top:8px}
.blog-page .cat-directory__title{font-size:clamp(24px,3vw,36px);margin:0}
.blog-page .cat-directory__sub{margin:14px 0 0;font-size:16.5px;color:var(--clr-text-gray);line-height:1.65;max-width:56ch}
.blog-page .cat-cards{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.blog-page .cat-card{display:flex;flex-direction:column;align-items:flex-start;gap:14px;background:#fff;border:1px solid var(--clr-border);border-radius:6px;padding:20px;color:inherit;height:100%;transition:border-color .2s,transform .2s,box-shadow .2s}
.blog-page .cat-card:hover{border-color:var(--clr-primary);transform:translateY(-3px);box-shadow:var(--shadow-md);text-decoration:none}
.blog-page .cat-card__ico{width:48px;height:48px;border-radius:var(--radius);display:grid;place-items:center;flex:none;background:#f3f1f2}
.blog-page .cat-card__ico img,.blog-page .cat-card__ico svg{width:26px;height:26px;object-fit:contain}
.blog-page .cat-card__ico svg{color:var(--clr-primary)}
.blog-page .cat-card__name{font-size:17px;font-weight:700;color:var(--clr-text-dark);line-height:1.25;letter-spacing:-.01em}
.blog-page .cat-card__desc{font-size:15px;color:var(--clr-text-gray-light);line-height:1.7;margin:0}
.blog-page .cat-card__more{margin-top:auto;padding-top:6px;font-size:13.5px;font-weight:600;color:var(--clr-primary);display:inline-flex;align-items:center;gap:6px}
.blog-page .cat-card:hover .cat-card__more .arr{transform:translateX(3px)}

/* ============ CERTIFICACIÓN (banda azul claro) ============ */
.blog-page .cert-band{position:relative;overflow:hidden;padding:80px 0;background:var(--clr-blue-light);color:var(--clr-text-dark)}
.blog-page .cert-band::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(74,111,165,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(74,111,165,.12) 1px,transparent 1px);background-size:58px 58px;mask-image:radial-gradient(86% 86% at 50% 28%,#000,transparent 82%);-webkit-mask-image:radial-gradient(86% 86% at 50% 28%,#000,transparent 82%)}
.blog-page .cert-band::after{content:"";position:absolute;inset:0;background:radial-gradient(46% 60% at 86% 8%,rgba(157,34,53,.12),transparent 60%),radial-gradient(50% 62% at 4% 98%,rgba(74,111,165,.22),transparent 62%)}
.blog-page .cert-band__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.blog-page .cert-band__text h2{font-size:clamp(26px,3.2vw,38px);color:var(--clr-text-dark);margin:0;line-height:1.14;max-width:20ch}
.blog-page .cert-band__text p{margin:16px 0 0;color:var(--clr-text-gray);font-size:17px;line-height:1.6;max-width:50ch}
.blog-page .cert-band .button{margin-top:30px}
.blog-page .cert-band__visual{display:flex;justify-content:center}
.blog-page .cert-band__visual img{width:100%;max-width:520px;height:auto;display:block}

/* ============ REVEAL ============ */
.blog-page .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.blog-page .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.blog-page .reveal{opacity:1;transform:none;transition:none}.blog-page .feature__media:hover img{transform:none}}

/* ============ RESPONSIVE (4→2→1) ============ */
@media(max-width:900px){
  .blog-page .feature{grid-template-columns:1fr;gap:24px}
  .blog-page .feature__media{order:-1}
  .blog-page .related-card{flex:1 1 calc(50% - 8px)}
  .blog-page .cat-cards{grid-template-columns:repeat(2,1fr)}
  .blog-page .cert-band__inner{grid-template-columns:1fr;gap:36px}
  .blog-page .cert-band__visual{justify-content:flex-start}
}
@media(max-width:600px){
  .blog-page .container{padding:0 18px}
  .blog-page .blog-hero{padding:40px 0 28px}
  .blog-page .cat-hero .container{padding:28px 18px 36px}
  .blog-page .related-card{flex:1 1 100%}
  .blog-page .cat-panel,.blog-page .cat-content{padding-top:32px}
  .blog-page .cat-cards{grid-template-columns:1fr}
}