/* =============================================================================
   DataThemes · blog.css  (v1.4 · limpio)
   SOLO estilos del índice del blog (magazine + clásico). Header, footer, nav,
   menú móvil y buscador viven en chrome.css y NO se redefinen aquí.
   Todo va encapsulado bajo .dt-blog para no contaminar otras páginas.
   ========================================================================== */

/* Puente de variables -> tokens del theme */
.dt-blog{
  --ink:var(--dt-ink-deep,#0D0C10);--ink-2:var(--dt-ink,#17161A);--ink-3:#211F26;
  --purple:var(--dt-purple,#413C58);--pink:var(--dt-primary,#F54576);--pink-soft:#FF6E97;
  --mint:var(--dt-mint,#10FFCB);--yellow:var(--dt-yellow,#FBD87F);
  --paper:var(--dt-paper,#FAFAF8);--paper-2:var(--dt-paper-2,#F4F5F9);
  --cream:var(--dt-peach,#FCE4D8);--pink-100:var(--dt-pink-soft,#FFD9E4);--mint-100:#BAF9DE;--cyan:#95F9FF;
  --lilac:var(--dt-lilac,#D4D0E4);
  --txt-dark:#211F26;--txt-dark-muted:var(--dt-muted,#6B6775);--txt-muted:var(--dt-muted,#6B6775);
  --txt-light:var(--dt-paper,#FAFAF8);--txt-light-muted:#A7A3B2;
  --border-dark:rgba(255,255,255,.10);--border-light:rgba(17,16,20,.10);
  --maxw:var(--dt-content-width,1200px);--radius:var(--dt-radius-md,18px);--radius-sm:var(--dt-radius-sm,12px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --g1:linear-gradient(135deg,#413C58,#6d6690);--g2:linear-gradient(135deg,#d62b5c,#F54576);
  --g3:linear-gradient(135deg,#1f6f66,#3fb8aa);--g4:linear-gradient(135deg,#2b2740,#4a4468);
  --g5:linear-gradient(135deg,#F54576,#ff9bb5);--g6:linear-gradient(135deg,#514a6b,#8079a0);
  --g7:linear-gradient(135deg,#3a3450,#5f587a);
}
.dt-blog .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.dt-blog .thumb,.dt-blog .cover,.dt-blog .bg{background-size:cover;background-position:center}
.dt-blog .thumb:empty,.dt-blog .cover:empty,.dt-blog .bg:empty{background-image:var(--g1)}

/* ===================== MAGAZINE ===================== */

.dt-blog .wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.dt-blog a{text-decoration:none;color:inherit}
.dt-blog .section{padding:52px 0}
.dt-blog .section.alt{background:var(--paper-2)}
/* Etiqueta de categoría (pill) */
.cat-pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--pink);padding:5px 12px;border-radius:6px}
.dt-blog .cat-pill.purple{background:var(--purple)}
.dt-blog .cat-pill.yellow{background:var(--yellow);color:#5a4a12}
/* Meta */
.meta{display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--txt-dark-muted);flex-wrap:wrap}
.dt-blog .meta span{display:inline-flex;align-items:center;gap:6px}
.dt-blog .meta i{font-size:15px}
/* Título de sección con línea */
.sec-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;gap:20px}
.dt-blog .sec-title h2{font-family:'Playfair Display',serif;font-weight:700;font-size:26px;color:var(--txt-dark);position:relative;padding-left:16px}
.dt-blog .sec-title h2::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:5px;border-radius:3px;background:var(--pink)}
.dt-blog .sec-title .viewall{font-size:13.5px;font-weight:600;color:var(--pink);display:inline-flex;align-items:center;gap:7px;transition:gap .2s var(--ease)}
.dt-blog .sec-title .viewall:hover{gap:12px}
.dt-blog .sec-title .viewall i{font-size:16px}
/* ============================================================
   HERO DESTACADOS (1 grande + 3 secundarios)
   ============================================================ */
.hero-mag{display:grid;grid-template-columns:1.5fr 1fr;gap:22px}
.dt-blog .hero-feat{position:relative;border-radius:16px;overflow:hidden;min-height:560px;display:flex;align-items:flex-end}
.dt-blog .hero-feat .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.dt-blog .hero-feat .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,12,16,.92),rgba(13,12,16,.25) 60%,transparent)}
.dt-blog .hero-feat .content{position:relative;z-index:2;padding:32px;color:#fff}
.dt-blog .hero-feat h2{font-family:'Playfair Display',serif;font-weight:700;font-size:30px;line-height:1.15;margin:14px 0 14px;color:#fff}
.dt-blog .hero-feat .meta{color:rgba(255,255,255,.8)}
.dt-blog .hero-side{display:flex;flex-direction:column;gap:18px}
.dt-blog .hero-s{position:relative;border-radius:13px;overflow:hidden;flex:1;min-height:170px;display:flex;align-items:flex-end}
.dt-blog .hero-s .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.dt-blog .hero-s .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,12,16,.9),rgba(13,12,16,.15) 70%)}
.dt-blog .hero-s .content{position:relative;z-index:2;padding:18px 20px;color:#fff}
.dt-blog .hero-s h3{font-family:'Playfair Display',serif;font-weight:700;font-size:16.5px;line-height:1.28;margin-top:9px;color:#fff}


@media(max-width:860px){
.dt-blog .hero-mag{grid-template-columns:1fr}
.dt-blog .hero-feat{min-height:400px}
.dt-blog .hero-s{min-height:200px}
}
/* ============================================================
   LAYOUT 1 · lista horizontal (foto izq + texto der)
   ============================================================ */
.list-posts{display:flex;flex-direction:column;gap:22px}
.dt-blog .lp{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:center}
.dt-blog .lp .thumb{border-radius:13px;overflow:hidden;height:180px;background-size:cover;background-position:center}
.dt-blog .lp h3{font-family:'Playfair Display',serif;font-weight:700;font-size:22px;line-height:1.25;margin:12px 0 10px;color:var(--txt-dark)}
.dt-blog .lp p{font-size:14px;line-height:1.6;font-weight:300;color:#3a3742;margin-bottom:14px}
.dt-blog .lp .read{font-size:13px;font-weight:600;color:var(--txt-dark);border:1.5px solid rgba(17,16,20,.15);padding:9px 18px;border-radius:100px;display:inline-flex;align-items:center;gap:7px;transition:all .2s var(--ease)}
.dt-blog .lp .read:hover{background:var(--pink);color:#fff;border-color:var(--pink)}


@media(max-width:680px){
.dt-blog .lp{grid-template-columns:1fr}
.dt-blog .lp .thumb{height:200px}
}
/* ============================================================
   LAYOUT 2 · grid de 4 tarjetas
   ============================================================ */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.dt-blog .gcard{background:#fff;border:1px solid rgba(17,16,20,.08);border-radius:14px;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
.dt-blog .gcard:hover{transform:translateY(-5px);box-shadow:0 16px 38px rgba(17,16,20,.1)}
.dt-blog .gcard .thumb{height:150px;background-size:cover;background-position:center;position:relative}
.dt-blog .gcard .thumb .cat-pill{position:absolute;top:12px;left:12px}
.dt-blog .gcard .body{padding:16px 18px 20px}
.dt-blog .gcard h3{font-family:'Playfair Display',serif;font-weight:700;font-size:16.5px;line-height:1.3;margin:8px 0 10px;color:var(--txt-dark)}


@media(max-width:900px){
.dt-blog .grid4{grid-template-columns:1fr 1fr}
}


@media(max-width:520px){
.dt-blog .grid4{grid-template-columns:1fr}
}
/* ============================================================
   LAYOUT 3 · destacado + lista compacta al lado
   ============================================================ */
.split{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:start}
.dt-blog .split-feat{border-radius:15px;overflow:hidden}
.dt-blog .split-feat .thumb{height:290px;background-size:cover;background-position:center;position:relative}
.dt-blog .split-feat .thumb .cat-pill{position:absolute;top:14px;left:14px}
.dt-blog .split-feat h3{font-family:'Playfair Display',serif;font-weight:700;font-size:24px;line-height:1.22;margin:14px 0 10px;color:var(--txt-dark)}
.dt-blog .split-feat p{font-size:14.5px;line-height:1.6;font-weight:300;color:#3a3742}
.dt-blog .split-list{display:flex;flex-direction:column;gap:16px}
.dt-blog .sl{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding-bottom:16px;border-bottom:1px solid rgba(17,16,20,.09)}
.dt-blog .sl:last-child{border-bottom:none;padding-bottom:0}
.dt-blog .sl .thumb{height:72px;border-radius:10px;background-size:cover;background-position:center}
.dt-blog .sl h4{font-family:'Playfair Display',serif;font-weight:700;font-size:15px;line-height:1.28;margin-bottom:6px;color:var(--txt-dark)}
.dt-blog .sl .meta{font-size:11.5px}


@media(max-width:820px){
.dt-blog .split{grid-template-columns:1fr;gap:26px}
}
/* Cargar más */
.load-wrap{text-align:center;margin-top:44px}
/* Encabezado de página (H1) */
.blog-page-head{max-width:680px}
.dt-blog .blog-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-dark-muted);margin-bottom:14px}
.dt-blog .blog-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pink)}
.dt-blog .blog-page-head h1{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(2.2rem,4vw,3rem);line-height:1.1;color:var(--txt-dark);margin-bottom:16px}
.dt-blog .blog-page-head p{font-size:16px;line-height:1.6;font-weight:300;color:var(--txt-dark-muted);max-width:560px}
/* ============================================================
   CTA FINAL (estilo artículo) — fondo oscuro + glow
   ============================================================ */
.blog-cta{background:var(--ink);position:relative;overflow:hidden;text-align:center}
.dt-blog .blog-cta .cta-glow{position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(100px);background:rgba(245,69,118,.28);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.dt-blog .blog-cta .cta-inner{position:relative;z-index:2;padding:88px 32px;max-width:680px;margin:0 auto}
.dt-blog .blog-cta h2,.dt-blog .blog-cta .cta-title{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.15;color:var(--paper);margin-bottom:16px}
.dt-blog .blog-cta p{color:var(--lilac);font-size:16.5px;line-height:1.6;font-weight:300;margin-bottom:30px}
.dt-blog .blog-cta .cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
.dt-blog .blog-cta .cta-btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;padding:15px 28px;border-radius:100px;transition:transform .2s var(--ease),box-shadow .2s,background .2s,color .2s,border-color .2s}
.dt-blog .blog-cta .cta-btn.primary{background:var(--pink);color:#fff;box-shadow:0 8px 24px rgba(245,69,118,.3)}
.dt-blog .blog-cta .cta-btn.primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(245,69,118,.5)}
.dt-blog .blog-cta .cta-btn.outline{background:transparent;border:1.5px solid rgba(255,255,255,.25);color:var(--paper)}
.dt-blog .blog-cta .cta-btn.outline:hover{background:var(--pink);border-color:var(--pink);color:#fff;transform:translateY(-2px)}
.dt-blog .blog-cta .cta-trust{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;font-size:13.5px}
.dt-blog .blog-cta .cta-trust span{display:inline-flex;align-items:center;gap:8px;color:var(--lilac)}
.dt-blog .blog-cta .cta-trust .d{width:7px;height:7px;border-radius:50%;background:var(--pink)}
.dt-blog .load-btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;padding:15px 32px;border-radius:100px;background:var(--txt-dark);color:#fff;border:none;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s}
.dt-blog .load-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(17,16,20,.22)}
.dt-blog .load-btn i{font-size:18px}

/* ===================== CLÁSICO ===================== */
.dt-blog h1, .dt-blog h2, .dt-blog h3{font-family:'Playfair Display',Georgia,serif;font-weight:700;line-height:1.12;letter-spacing:-.01em}
.dt-blog a{color:inherit;text-decoration:none}
.dt-blog ul{list-style:none}
.dt-blog ::selection{background:var(--pink);color:#fff}
.dt-blog .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.dt-blog .eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;display:inline-flex;align-items:center;gap:9px}
.dt-blog .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pink)}
.dt-blog .btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;padding:15px 26px;border-radius:100px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;cursor:pointer;border:none;white-space:nowrap}
.dt-blog .btn-primary{background:var(--pink);color:#fff;box-shadow:0 8px 26px rgba(245,69,118,.32)}
.dt-blog .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(245,69,118,.44)}
.dt-blog .link-arrow{color:var(--pink);font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:6px}
.dt-blog .link-arrow .lucide{transition:transform .25s var(--ease)}
.dt-blog .link-arrow:hover .lucide{transform:translateX(4px)}
.dt-blog .brand{font-family:'Playfair Display',serif;font-style:italic;font-weight:700;font-size:26px;color:var(--paper)}
.dt-blog .brand .dot{color:var(--pink);font-style:normal}
.dt-blog .brand .t{font-style:normal;font-weight:600;font-size:24px}
/* Hero */
.blog-hero{position:relative;padding:170px 0 90px;overflow:hidden;background:var(--ink);color:var(--txt-light)}
.dt-blog .hero-grid{position:absolute;inset:0;background-image:linear-gradient(var(--border-dark) 1px,transparent 1px),linear-gradient(90deg,var(--border-dark) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 70% 70% at 50% 20%,#000 40%,transparent 85%);opacity:.5}
.dt-blog .glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.dt-blog .glow.pink{width:520px;height:520px;background:rgba(245,69,118,.3);top:-150px;right:-90px;animation:drift1 14s ease-in-out infinite alternate}
.dt-blog .glow.mint{width:320px;height:320px;background:rgba(16,255,203,.1);bottom:-120px;left:-60px}


@keyframes drift1{
.dt-blog to{transform:translate(-34px,34px) scale(1.08)}
}
.dt-blog .blog-hero-inner{position:relative;z-index:2;max-width:640px}
.dt-blog .blog-hero .eyebrow{color:var(--pink-soft)}
.dt-blog .blog-hero h1{font-size:clamp(2.4rem,5vw,4rem);margin:22px 0 18px;color:var(--paper)}
.dt-blog .blog-hero p{font-size:1.16rem;color:var(--txt-light-muted);max-width:52ch}
/* Filtros */
.filter-bar{background:var(--paper);position:sticky;top:0;z-index:900;border-bottom:1px solid var(--border-light);padding:18px 0}
.dt-blog .filter-bar.stuck{box-shadow:0 8px 24px rgba(17,16,20,.06)}
.dt-blog .filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.dt-blog .chip{font-size:.9rem;font-weight:500;padding:9px 18px;border-radius:100px;border:1px solid var(--border-light);background:#fff;color:var(--txt-muted);cursor:pointer;transition:all .2s}
.dt-blog .chip:hover{border-color:var(--pink);color:var(--pink)}
.dt-blog .chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
/* Contenido */
.blog-body{padding:60px 0 40px}
/* Destacado */
.featured{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center;margin-bottom:64px;background:#fff;border:1px solid var(--border-light);border-radius:var(--radius);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s}
.dt-blog .featured:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(17,16,20,.1)}
.dt-blog .featured .cover{height:100%;min-height:340px;background:linear-gradient(135deg,var(--pink),var(--purple));position:relative}
.dt-blog .featured .cover .flag{position:absolute;top:20px;left:20px;font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;background:rgba(13,12,16,.55);color:#fff;padding:8px 14px;border-radius:100px}
.dt-blog .featured .fbody{padding:40px 40px 40px 4px}
.dt-blog .featured .meta{font-family:'JetBrains Mono',monospace;font-size:.76rem;color:var(--txt-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}
.dt-blog .featured h2{font-size:clamp(1.6rem,2.8vw,2.3rem);margin-bottom:14px}
.dt-blog .featured p{color:var(--txt-muted);margin-bottom:22px}
/* Grilla */
.dt-blog .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dt-blog .post{background:#fff;border:1px solid var(--border-light);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s}
.dt-blog .post:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(17,16,20,.1)}
.dt-blog .post .cover{height:172px;position:relative;background:var(--purple)}
.dt-blog .post .cover .flag{position:absolute;top:14px;left:14px;font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;background:rgba(13,12,16,.5);color:#fff;padding:6px 12px;border-radius:100px}
.dt-blog .post .pbody{padding:24px;display:flex;flex-direction:column;flex:1}
.dt-blog .post .meta{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--txt-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.dt-blog .post h3{font-family:'Playfair Display',serif;font-size:1.24rem;line-height:1.22;margin-bottom:10px}
.dt-blog .post p{color:var(--txt-muted);font-size:.9rem;flex:1}
.dt-blog .post .foot{margin-top:18px;display:flex;align-items:center;justify-content:space-between}
.dt-blog .post .author{font-size:.82rem;color:var(--txt-muted)}
/* Category tints */
.c-marketing .cover{background:linear-gradient(135deg,var(--pink),var(--purple))}
.dt-blog .c-marketing-digital .cover{background:linear-gradient(135deg,#0a9c7d,var(--purple))}
.dt-blog .c-publicidad .cover{background:linear-gradient(135deg,var(--yellow),#b8860b)}
.dt-blog .c-redes .cover{background:linear-gradient(135deg,var(--purple),var(--lilac))}
.dt-blog .c-web .cover{background:linear-gradient(135deg,#0a7ea4,var(--purple))}
.dt-blog .is-hidden{display:none}
/* Paginación */
.pagination{display:flex;justify-content:center;gap:8px;margin-top:56px}
.dt-blog .pagination a{width:44px;height:44px;display:grid;place-items:center;border-radius:11px;border:1px solid var(--border-light);background:#fff;font-weight:600;font-size:.95rem;color:var(--txt-dark);transition:all .2s}
.dt-blog .pagination a:hover{border-color:var(--pink);color:var(--pink)}
.dt-blog .pagination a.active{background:var(--ink);color:#fff;border-color:var(--ink)}
/* Newsletter */
.newsletter{background:var(--ink);color:var(--txt-light);position:relative;overflow:hidden;margin-top:40px}
.dt-blog .newsletter .glow.pink{width:480px;height:480px;bottom:-200px;left:-100px;opacity:.5}
.dt-blog .nl-inner{position:relative;z-index:2;padding:80px 0;text-align:center;max-width:620px;margin:0 auto}
.dt-blog .nl-inner .eyebrow{color:var(--mint);justify-content:center}
.dt-blog .nl-inner h2{font-size:clamp(1.8rem,3.4vw,2.7rem);color:var(--paper);margin:18px 0 14px}
.dt-blog .nl-inner p{color:var(--txt-light-muted);margin-bottom:28px}
.dt-blog .nl-form{display:flex;gap:10px;max-width:460px;margin:0 auto;flex-wrap:wrap}
.dt-blog .nl-form input{flex:1;min-width:200px;background:rgba(255,255,255,.05);border:1px solid var(--border-dark);border-radius:100px;padding:14px 22px;color:var(--paper);font-family:'Inter';font-size:.95rem}
.dt-blog .nl-form input:focus{outline:none;border-color:var(--mint)}
.dt-blog .reveal[data-d="1"]{transition-delay:.06s}
.dt-blog .reveal[data-d="2"]{transition-delay:.12s}
.dt-blog .reveal[data-d="3"]{transition-delay:.18s}



@media(max-width:960px){
.dt-blog .featured{grid-template-columns:1fr}
.dt-blog .featured .cover{min-height:220px}
.dt-blog .featured .fbody{padding:30px}
.dt-blog .post-grid{grid-template-columns:1fr 1fr}
}


@media(max-width:560px){
.dt-blog .post-grid{grid-template-columns:1fr}
.dt-blog .blog-hero{padding:140px 0 66px}
}


@media(prefers-reduced-motion:reduce){
.dt-blog .reveal{opacity:1;transform:none}
}

/* Contador de artículos en el hero de categoría/autor */
.dt-blog .blog-page-head .blog-count{display:inline-block;margin-top:14px;font-size:.82rem;font-weight:600;letter-spacing:.04em;color:var(--pink);background:rgba(245,69,118,.12);padding:6px 14px;border-radius:100px}

/* Hero de categoría/autor: el blog-page-head va sobre el blog-hero (fondo oscuro),
   así que su texto debe ser claro (no el oscuro del índice sobre fondo claro) */
.dt-blog .blog-hero .blog-page-head h1{color:var(--paper)}
.dt-blog .blog-hero .blog-page-head p{color:var(--txt-light-muted)}
.dt-blog .blog-hero .blog-eyebrow{color:var(--pink-soft)}
.dt-blog .blog-hero .blog-page-head .blog-count{color:#fff;background:rgba(245,69,118,.25)}