/* blog.css — portada del blog y posts de rankings (EN/ES/FR).
   Páginas generadas por project/blog/gen_blog.py; prefijo bl- para no chocar
   con las clases del resto del sitio. */
.bl-wrap { max-width: 1120px; margin: 0 auto; padding: 120px clamp(20px,5vw,64px) clamp(60px,8vw,110px); }
.bl-kicker { font-family: 'Space Grotesk', ui-sans-serif, sans-serif; color: #D4FF3D; font-size: 14px;
             letter-spacing: 0.02em; margin-bottom: 22px; }
.bl-wrap h1, .bl-wrap h2, .bl-wrap h3 { font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
                                         letter-spacing: -0.04em; margin: 0; color: #F2F3F0; }
.bl-wrap a { color: inherit; }

/* portada */
.bl-index h1 { font-size: clamp(36px,6vw,68px); line-height: 1.02; max-width: 16ch; margin-bottom: 18px; }
.bl-lead { color: #6E727A; font-size: clamp(15px,1.6vw,18px); line-height: 1.6; max-width: 60ch; margin: 0 0 44px; }
.bl-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 18px; }
.bl-card { display: block; text-decoration: none; background: #17181B; border: 1px solid rgba(242,243,240,0.08);
           border-radius: 18px; padding: 26px 24px 22px; transition: border-color .3s ease, transform .3s ease; }
.bl-card-tag { display: inline-block; font-size: 10px; font-weight: 600; color: #0B0B0C; background: #D4FF3D;
               border-radius: 4px; padding: 3px 7px; margin-bottom: 16px; }
.bl-card h2 { font-size: 21px; line-height: 1.2; margin-bottom: 10px; }
.bl-card p { color: #6E727A; font-size: 14px; line-height: 1.55; margin: 0 0 18px; }
.bl-card-go { color: #D4FF3D; font-size: 13px; font-weight: 500; }

/* post */
.bl-post h1 { font-size: clamp(32px,5.4vw,62px); line-height: 1.03; max-width: 18ch; margin: 0 0 20px; }
.bl-dek { color: #6E727A; font-size: clamp(16px,1.8vw,20px); line-height: 1.55; max-width: 62ch; margin: 0 0 22px; }
.bl-meta { display: flex; gap: 9px; flex-wrap: wrap; color: #5a5e66; font-size: 12.5px; }
.bl-disc { margin: 14px 0 0; color: #5a5e66; font-size: 12.5px; line-height: 1.55; max-width: 70ch; }
.bl-disc a { color: #8a8d95; }
.bl-hero { margin: 40px 0 44px; border-radius: 20px; overflow: hidden; background: #17181B;
           border: 1px solid rgba(242,243,240,0.08); aspect-ratio: 21/9; }
.bl-hero img { width: 100%; height: 100%; object-fit: contain; padding: 18px; display: block; }
.bl-body p { color: #c9ccd2; font-size: clamp(15px,1.6vw,17.5px); line-height: 1.72; max-width: 68ch; margin: 0 0 20px; }

.bl-method { margin: 38px 0 52px; background: #17181B; border: 1px solid rgba(212,255,61,0.22);
             border-radius: 18px; padding: 26px 28px; max-width: 78ch; }
.bl-method-h { font-family: 'Space Grotesk', sans-serif; color: #D4FF3D; font-size: 13px; letter-spacing: 0.06em;
               text-transform: uppercase; margin-bottom: 18px; }
.bl-mrow { display: grid; grid-template-columns: 104px 1fr; gap: 16px; padding: 9px 0;
           border-top: 1px solid rgba(242,243,240,0.07); }
.bl-mrow:first-of-type { border-top: 0; }
.bl-mk { color: #D4FF3D; font-size: 12.5px; font-weight: 600; padding-top: 1px; }
.bl-mv { color: #b8bcc4; font-size: 14px; line-height: 1.6; }
.bl-method-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(242,243,240,0.07);
                  color: #6E727A; font-size: 12.5px; line-height: 1.6; }

.bl-picks { display: flex; flex-direction: column; gap: 20px; }
.bl-pick { display: grid; grid-template-columns: 64px 260px 1fr; gap: 22px; background: #17181B;
           border: 1px solid rgba(242,243,240,0.08); border-radius: 20px; padding: 24px; align-items: start; }
.bl-rank { font-family: 'Space Grotesk', sans-serif; font-size: 34px; color: #D4FF3D; line-height: 1;
           letter-spacing: -0.05em; padding-top: 4px; }
.bl-media { background: #0e0f11; border: 1px solid rgba(242,243,240,0.06); border-radius: 14px;
            aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; padding: 12px; }
.bl-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bl-top { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 14px; }
.bl-brand { color: #6E727A; font-size: 12px; letter-spacing: 0.02em; margin-bottom: 7px; }
.bl-name { font-size: clamp(18px,2vw,24px); line-height: 1.18; }
.bl-side { display: flex; flex-direction: column; gap: 7px; align-items: flex-end; flex-shrink: 0; }
.bl-rating { color: #D4FF3D; font-size: 13px; font-weight: 600; white-space: nowrap; }
.bl-rating span { color: #6E727A; font-weight: 400; }
.bl-tier { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
           color: #6E727A; border: 1px solid rgba(242,243,240,0.18); border-radius: 999px; padding: 3px 9px; }
.bl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.bl-chip { background: rgba(242,243,240,0.05); border: 1px solid rgba(242,243,240,0.08); border-radius: 10px;
           padding: 7px 11px; display: flex; flex-direction: column; gap: 2px; min-width: 76px; }
.bl-chip-k { color: #6E727A; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; }
.bl-chip-v { font-family: 'Space Grotesk', sans-serif; font-size: 15px; letter-spacing: -0.02em; color: #F2F3F0; }
.bl-why { color: #c9ccd2; font-size: 15px; line-height: 1.68; margin: 0 0 16px; max-width: 66ch; }
.bl-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.bl-note { font-size: 13px; line-height: 1.55; color: #a9adb5; border-left: 2px solid; padding-left: 12px; }
.bl-note span { display: block; font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
                margin-bottom: 5px; font-weight: 600; }
.bl-pro { border-color: #D4FF3D; } .bl-pro span { color: #D4FF3D; }
.bl-con { border-color: #6a5f2a; } .bl-con span { color: #9a8b3d; }
.bl-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.bl-btn { display: inline-block; text-decoration: none; border-radius: 999px; padding: 11px 20px;
          font-size: 13.5px; font-weight: 500; transition: opacity .25s ease, border-color .25s ease; }
.bl-btn-lime { background: #D4FF3D; color: #0B0B0C !important; font-weight: 600; }
.bl-btn-ghost { border: 1px solid rgba(242,243,240,0.18); color: #F2F3F0; }
.bl-close { margin-top: 44px; padding-top: 32px; border-top: 1px solid rgba(242,243,240,0.08); }
.bl-close p { color: #c9ccd2; font-size: 16px; line-height: 1.7; max-width: 66ch; margin: 0 0 22px; }
.bl-more { margin-top: 56px; }
.bl-more h2 { font-size: 22px; margin-bottom: 18px; }

@media (hover:hover) {
  .bl-card:hover { border-color: rgba(212,255,61,0.45); transform: translateY(-3px); }
  .bl-btn:hover { opacity: .85; }
}
@media (max-width: 900px) {
  .bl-pick { grid-template-columns: 44px 1fr; }
  .bl-media { grid-column: 2; max-width: 260px; }
  .bl-pbody { grid-column: 2; }
  .bl-notes { grid-template-columns: 1fr; }
  .bl-hero { aspect-ratio: 16/10; }
}
@media (max-width: 520px) {
  .bl-top { flex-direction: column; }
  .bl-side { align-items: flex-start; flex-direction: row; }
  .bl-mrow { grid-template-columns: 1fr; gap: 4px; }
}