/* ============================================================
   blog.css  —  Estilos para artículos de blog y páginas SEO de DBSOFT
   Aislado del CSS general del sitio:
   - SIN reset global (*) ni regla body (el sitio ya los tiene)
   - Variables con prefijo --art-* para no chocar
   - .btn-primary -> .article-btn ; .lead -> .article-lead
   Cargar SOLO en vistas de blog/SEO con @section styles.
   ============================================================ */

:root{
      --art-navy:#0D2D5E;
      --art-navy-dark:#081A3A;
      --art-cyan:#00B4D8;
      --art-cyan-light:#5DD8F0;
      --art-ink:#1A202C;
      --art-gray:#5A6678;
      --art-line:#E2E8F0;
      --art-bg-soft:#F4F8FC;
      --art-white:#FFFFFF;
    }

    /* ░░░ HERO del artículo ░░░ */
    .article-hero{
      background:linear-gradient(150deg,var(--art-navy-dark) 0%,var(--art-navy) 55%,#0f3a78 100%);
      color:var(--art-white);
      padding:80px 24px 120px;
      position:relative;
      overflow:hidden;
    }
    .article-hero::after{
      content:"";
      position:absolute;
      right:-120px;top:-120px;
      width:420px;height:420px;
      background:radial-gradient(circle,rgba(0,180,216,0.28),transparent 70%);
      border-radius:50%;
    }
    .hero-inner{max-width:820px;margin:0 auto;position:relative;z-index:2;}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      font-size:13px;font-weight:600;letter-spacing:0.14em;
      text-transform:uppercase;color:var(--art-cyan-light);
      border:1px solid rgba(0,180,216,0.4);
      padding:7px 16px;border-radius:100px;margin-bottom:28px;
    }
    .article-hero h1{
      font-family:'Syne',sans-serif;
      font-weight:800;
      font-size:clamp(2rem,5vw,3.4rem);
      line-height:1.08;
      letter-spacing:-0.02em;
      margin-bottom:22px;
    }
    .article-hero h1 .accent{color:var(--art-cyan-light);}
    .hero-meta{
      display:flex;flex-wrap:wrap;gap:18px;align-items:center;
      font-size:14px;color:rgba(255,255,255,0.7);margin-top:8px;
    }
    .hero-meta span{display:inline-flex;align-items:center;gap:7px;}
    .hero-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--art-cyan);}

    /* ░░░ Cuerpo del artículo ░░░ */
    .article-body{
      max-width:760px;margin:-70px auto 0;
      background:var(--art-white);
      border-radius:20px;
      box-shadow:0 24px 60px -28px rgba(13,45,94,0.35);
      padding:60px 56px;
      position:relative;z-index:5;
    }
    .article-lead{
      font-size:1.22rem;line-height:1.65;color:var(--art-navy);
      font-weight:500;margin-bottom:38px;
      padding-bottom:34px;border-bottom:1px solid var(--art-line);
    }
    .article-body h2{
      font-family:'Syne',sans-serif;
      font-weight:700;
      font-size:1.55rem;
      color:var(--art-navy);
      letter-spacing:-0.01em;
      margin:46px 0 16px;
      padding-left:18px;
      border-left:4px solid var(--art-cyan);
    }
    .article-body p{margin-bottom:18px;color:var(--art-ink);}
    .article-body strong{color:var(--art-navy);font-weight:600;}

    /* Lista con checks */
    .check-list{list-style:none;margin:24px 0;}
    .check-list li{
      position:relative;padding:12px 0 12px 40px;
      border-bottom:1px solid var(--art-line);
    }
    .check-list li:last-child{border-bottom:none;}
    .check-list li::before{
      content:"";position:absolute;left:0;top:14px;
      width:24px;height:24px;border-radius:7px;
      background:var(--art-bg-soft);
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2300B4D8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat:no-repeat;background-position:center;
    }

    /* Caja destacada / callout */
    .callout{
      background:var(--art-bg-soft);
      border-radius:14px;
      padding:26px 28px;
      margin:34px 0;
      border-left:4px solid var(--art-cyan);
    }
    .callout p{margin:0;font-size:0.98rem;color:var(--art-gray);}

    /* ░░░ CTA final ░░░ */
    .cta-box{
      margin-top:50px;
      background:linear-gradient(135deg,var(--art-navy) 0%,#0f3a78 100%);
      border-radius:18px;
      padding:44px 40px;
      text-align:center;
      color:var(--art-white);
    }
    .cta-box h3{
      font-family:'Syne',sans-serif;font-weight:700;
      font-size:1.5rem;margin-bottom:10px;
    }
    .cta-box p{color:rgba(255,255,255,0.78);margin-bottom:26px;font-size:1rem;}
    .article-btn{
      display:inline-flex;align-items:center;gap:10px;
      background:var(--art-cyan);color:var(--art-navy-dark);
      font-weight:700;font-size:1.02rem;
      padding:16px 32px;border-radius:100px;
      text-decoration:none;
      transition:transform 0.2s ease,box-shadow 0.2s ease;
      box-shadow:0 8px 24px -6px rgba(0,180,216,0.6);
    }
    .article-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -6px rgba(0,180,216,0.8);}

    /* Enlaces relacionados */
    .related{
      max-width:760px;margin:40px auto 80px;padding:0 56px;
    }
    .related-title{
      font-size:13px;font-weight:600;letter-spacing:0.1em;
      text-transform:uppercase;color:var(--art-gray);margin-bottom:16px;
    }
    .related-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
    .related-card{
      display:block;padding:20px 22px;border:1px solid var(--art-line);
      border-radius:14px;text-decoration:none;color:var(--art-navy);
      font-weight:600;transition:all 0.2s ease;
    }
    .related-card:hover{border-color:var(--art-cyan);background:var(--art-bg-soft);transform:translateY(-2px);}
    .related-card span{display:block;font-size:12px;color:var(--art-gray);font-weight:500;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.08em;}

    /* Responsive */
    @media(max-width:680px){
      .article-body{padding:40px 24px;margin-top:-50px;border-radius:16px;}
      .related{padding:0 24px;}
      .related-grid{grid-template-columns:1fr;}
      .cta-box{padding:34px 24px;}
    }

/* ░░░ Índice / hub del blog ░░░ */
.blog-list{
  max-width:820px;margin:-60px auto 90px;
  position:relative;z-index:5;
  display:grid;gap:20px;padding:0 24px;
}
.blog-item{
  background:var(--art-white);
  border:1px solid var(--art-line);
  border-radius:16px;
  padding:30px 32px;
  box-shadow:0 16px 40px -28px rgba(13,45,94,0.3);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  text-decoration:none;display:block;
}
.blog-item:hover{
  border-color:var(--art-cyan);
  transform:translateY(-3px);
  box-shadow:0 22px 50px -28px rgba(13,45,94,0.42);
}
.blog-item .cat{
  font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--art-cyan);
}
.blog-item h2{
  font-family:'Syne',sans-serif;font-weight:700;
  font-size:1.38rem;color:var(--art-navy);
  margin:8px 0 10px;border:none;padding:0;
}
.blog-item p{color:var(--art-gray);margin:0 0 14px;font-size:.98rem;}
.blog-item .more{color:var(--art-navy);font-weight:600;font-size:.95rem;}
.blog-item:hover .more{color:var(--art-cyan);}

@media(max-width:680px){
  .blog-list{margin-top:-44px;padding:0 18px;}
  .blog-item{padding:24px 22px;}
}