/* =====================
   TOPBAR
   ===================== */
.dl-topbar{background:#111!important;color:#9ca3af!important;font-size:11px!important;padding:6px 24px!important;display:flex!important;justify-content:space-between!important;align-items:center!important;font-family:Inter,sans-serif!important}
.dl-topbar-links{display:flex!important;gap:20px!important}
.dl-topbar a{color:#9ca3af!important;text-decoration:none!important}
.dl-topbar a:hover{color:#fff!important}

/* =====================
   NAV (blanco)
   ===================== */
#dl-nav{background:#fff!important;border-bottom:1px solid #e5e7eb!important;position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;height:64px!important;z-index:99999!important;display:flex!important;align-items:center!important}
#dl-nav .dl-nav-inner{max-width:1200px!important;margin:0 auto!important;padding:0 24px!important;display:flex!important;align-items:center!important;gap:32px!important;width:100%!important;height:64px!important}
#dl-nav .dl-logo{display:flex!important;align-items:center!important;gap:10px!important;text-decoration:none!important;flex-shrink:0!important}
#dl-nav .dl-logo-box{width:36px!important;height:36px!important;background:#111!important;border-radius:6px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#eab308!important;font-weight:900!important;font-size:13px!important}
#dl-nav .dl-logo-text{font-weight:900!important;font-size:20px!important;color:#111!important}
#dl-nav .dl-logo-text span{color:#eab308!important}
#dl-nav .dl-nav-links{display:flex!important;flex:1!important}
#dl-nav .dl-nav-links a{padding:0 16px!important;height:64px!important;display:flex!important;align-items:center!important;font-size:13px!important;font-weight:500!important;color:#6b7280!important;border-bottom:2px solid transparent!important;text-decoration:none!important;white-space:nowrap!important;transition:all 0.2s!important}
#dl-nav .dl-nav-links a:hover{color:#111!important;border-bottom-color:#111!important}
#dl-nav .dl-nav-actions{display:flex!important;gap:8px!important;margin-left:auto!important;align-items:center!important}
#dl-nav .dl-btn-login{background:none!important;border:none!important;font-size:13px!important;color:#6b7280!important;padding:8px 16px!important;cursor:pointer!important;font-weight:500!important;border-radius:6px!important;text-decoration:none!important}
#dl-nav .dl-btn-login:hover{background:#f3f4f6!important;color:#111!important}
#dl-nav .dl-btn-register{background:#111!important;color:#fff!important;text-decoration:none!important;font-size:13px!important;font-weight:700!important;padding:9px 20px!important;border-radius:6px!important;display:inline-block!important}
#dl-nav .dl-btn-register:hover{background:#374151!important}

/* =====================
   BODY OFFSET + OCULTAR NAV VIEJO
   ===================== */
body{padding-top:64px!important}
nav.navbar-custom{display:none!important}
.content-bottom-menu{display:none!important}

/* =====================
   HERO
   ===================== */
.dl-hero{background:#111;color:#fff;padding:80px 24px 180px;overflow:visible}
.dl-hero-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.dl-badge{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.dl-badge-line{width:4px;height:40px;background:#eab308;border-radius:2px}
.dl-badge-text{font-size:11px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:2px}
.dl-hero h1{font-size:42px;font-weight:900;line-height:1.1;margin-bottom:16px}
.dl-hero h1 span{color:#eab308}
.dl-hero p{color:#9ca3af;font-size:16px;line-height:1.7;margin-bottom:28px}
.dl-btns{display:flex;gap:12px;flex-wrap:wrap}
.dl-btn-y{background:#eab308;color:#111;font-weight:700;padding:12px 22px;border-radius:6px;text-decoration:none;font-size:14px;display:inline-block;transition:background 0.2s}
.dl-btn-y:hover{background:#ca8a04}
.dl-btn-o{background:none;color:#fff;border:1px solid #374151;font-weight:600;padding:12px 22px;border-radius:6px;text-decoration:none;font-size:14px;display:inline-block;transition:border-color 0.2s}
.dl-btn-o:hover{border-color:#9ca3af}

/* =====================
   STATS
   ===================== */
.dl-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-content:start}
.dl-stat{background:#1f2937;border:1px solid #374151;border-radius:10px;padding:18px}
.dl-stat-n{font-size:28px;font-weight:900;color:#eab308}
.dl-stat-l{font-size:12px;color:#9ca3af;margin-top:4px}

/* =====================
   SECCIONES
   ===================== */
.dl-sec{max-width:1200px;margin:0 auto;padding:40px 24px}
.dl-sec-alt{background:#f9fafb;border-top:1px solid #f3f4f6;border-bottom:1px solid #f3f4f6}
.dl-sec-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:12px}
.dl-sec-title{font-size:18px;font-weight:900;margin-bottom:16px}
.dl-ver-mas{font-size:13px;color:#111;font-weight:600;text-decoration:none}

/* =====================
   ARTÍCULO DESTACADO
   ===================== */
.dl-badge-black{background:#111;color:#fff;font-size:11px;font-weight:700;padding:4px 12px;border-radius:4px;text-transform:uppercase;letter-spacing:1px;display:inline-block;margin-bottom:16px}
.dl-badge-sub{color:#9ca3af;font-size:13px;margin-left:8px}
.dl-featured{background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;display:grid;grid-template-columns:2fr 1fr;text-decoration:none;color:inherit;cursor:pointer;transition:box-shadow 0.2s}
.dl-featured:hover{box-shadow:0 4px 20px rgba(0,0,0,.1)}
.dl-featured-body{padding:24px}
.dl-cat{display:inline-block;font-size:11px;font-weight:600;padding:3px 8px;border-radius:4px;background:#eff6ff;color:#1d4ed8;margin-bottom:10px}
.dl-featured-body h2{font-size:20px;font-weight:900;color:#111;line-height:1.35;margin-bottom:10px;transition:color 0.2s}
.dl-featured:hover .dl-featured-body h2{color:#ca8a04}
.dl-featured-body p{color:#6b7280;font-size:14px;line-height:1.7;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dl-author-row{display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px solid #f3f4f6}
.dl-avatar{width:34px;height:34px;background:#111;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:900;flex-shrink:0}
.dl-author-name{font-size:13px;font-weight:700;color:#111}
.dl-author-role{font-size:11px;color:#9ca3af}
.dl-author-date{margin-left:auto;font-size:11px;color:#9ca3af;text-align:right}
.dl-feat-img{position:relative;overflow:hidden;min-height:260px}
.dl-feat-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s}
.dl-featured:hover .dl-feat-img img{transform:scale(1.05)}
.dl-feat-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),transparent 60%)}
.dl-feat-label{position:absolute;bottom:14px;left:14px;color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:2px;font-weight:600}

/* =====================
   GRID DE ARTÍCULOS
   ===================== */
.dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dl-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;text-decoration:none;display:block;transition:box-shadow .2s,transform .2s;color:inherit;cursor:pointer}
.dl-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08);transform:translateY(-2px)}
.dl-card-img{position:relative;height:170px;overflow:hidden}
.dl-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.dl-card:hover .dl-card-img img{transform:scale(1.05)}
.dl-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.4),transparent 55%)}
.dl-card-cat{position:absolute;top:10px;left:10px;font-size:10px;font-weight:700;padding:3px 7px;border-radius:4px;background:#eff6ff;color:#1d4ed8}
.dl-card-body{padding:14px}
.dl-card-body h3{font-size:13px;font-weight:700;color:#111;line-height:1.5;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color 0.2s}
.dl-card:hover .dl-card-body h3{color:#ca8a04}
.dl-card-footer{display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1px solid #f3f4f6}
.dl-av-sm{width:26px;height:26px;background:#111;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px;font-weight:900;flex-shrink:0}
.dl-card-author{font-size:11px;font-weight:600;color:#374151}
.dl-card-date{font-size:10px;color:#9ca3af}
.dl-view-more{text-align:center;margin-top:28px}
.dl-btn-border{background:none;border:1px solid #d1d5db;color:#374151;font-size:13px;font-weight:600;padding:10px 32px;border-radius:8px;cursor:pointer;font-family:inherit;text-decoration:none;display:inline-block;transition:all 0.2s}
.dl-btn-border:hover{border-color:#111;color:#111}

/* =====================
   RESPONSIVE
   ===================== */
@media(max-width:768px){
  .dl-hero-inner,.dl-featured,.dl-grid{grid-template-columns:1fr}
  .dl-hero h1{font-size:28px}
  .dl-stats{grid-template-columns:1fr 1fr}
  #dl-nav .dl-nav-links{display:none!important}
  #dl-nav .dl-nav-actions .dl-btn-login{display:none!important}
}



/* ===== PHRASE HERO ===== */
.phrase-hero{background:linear-gradient(135deg,#0f0f0f 0%,#1a1a2e 50%,#16213e 100%)!important;padding:2.5rem 1.5rem!important;text-align:center!important;margin-bottom:0!important;border-bottom:2px solid #eab308!important;position:relative!important;overflow:hidden!important}
.phrase-hero::before{content:'\201C'!important;position:absolute!important;top:-10px!important;left:20px!important;font-size:8rem!important;color:rgba(234,179,8,0.1)!important;font-family:Georgia,serif!important;line-height:1!important;pointer-events:none!important}
.phrase-hero::after{content:'\201D'!important;position:absolute!important;bottom:-30px!important;right:20px!important;font-size:8rem!important;color:rgba(234,179,8,0.1)!important;font-family:Georgia,serif!important;line-height:1!important;pointer-events:none!important}
.phrase-hero .content{font-size:1.25rem!important;font-weight:400!important;font-style:italic!important;color:#f1f1f1!important;max-width:700px!important;margin:0 auto!important;line-height:1.7!important;position:relative!important;z-index:1!important}
.phrase-hero .author{font-size:0.85rem!important;font-weight:700!important;color:#eab308!important;margin:0.8rem 0 0!important;text-transform:uppercase!important;letter-spacing:2px!important;position:relative!important;z-index:1!important}
.phrase-hero .author::before{content:'— '!important}

/* ===== CARD HOVER AMARILLO ===== */
.dl-card{transition:all 0.3s ease!important;border:1px solid #e5e7eb!important}
.dl-card:hover{border-color:#eab308!important;box-shadow:0 8px 24px rgba(234,179,8,0.15)!important;transform:translateY(-4px)!important}
.card-custom-style{transition:all 0.3s ease!important}
.card-custom-style:hover{border-color:#eab308!important;box-shadow:0 8px 24px rgba(234,179,8,0.15)!important;transform:translateY(-4px)!important}
.dl-featured{transition:all 0.3s ease!important}
.dl-featured:hover{border-color:#eab308!important;box-shadow:0 8px 24px rgba(234,179,8,0.15)!important}

/* ===== TOPBAR MOBILE ===== */
@media(max-width:768px){
  .phrase-hero .content{font-size:1.05rem!important}
  .phrase-hero{padding:2rem 1.2rem!important}
  .phrase-hero::before{font-size:5rem!important;top:-5px!important;left:10px!important}
  .phrase-hero::after{font-size:5rem!important;bottom:-20px!important;right:10px!important}
}

/* ===== FIX ESPACIOS BLANCOS ===== */
main{padding-top:0!important;margin-top:0!important}
.phrase-hero{margin-top:0!important}
.dl-hero{background:#111;color:#fff;padding:80px 24px 180px;overflow:visible}


.hidden-sn main,.web.hidden-sn main,.web main{padding-top:0!important}

.dl-hero .dl-cta{margin-top:28px;}

/* --- NAV SAFE GUARD --- */
.dl-nav a,
.navbar a,
header nav a{
  display:inline-flex !important;
  align-items:center !important;
  height:auto !important;
}
.dl-nav a:hover,
.navbar a:hover,
header nav a:hover{
  background: rgba(17,17,17,.08) !important;
  border-radius: 12px !important;
}

/* ===== HEADER: NO NEGRO EN HOVER ===== */
#dl-nav .dl-nav-links a:hover{
  background: transparent !important;
  box-shadow: none !important;
}
/* ===== END ===== */


/* ===== HERO: evita franja blanca antes de la siguiente sección ===== */
.dl-sec{margin-top:0!important;}