/* ==========================================================
   blog.css - blog de desarrollowebamedida.es
   ========================================================== */
.wam-blog {
    background: #0D0D0D;
    color: #cfcfcf;
    padding-top: 120px;
}
.wam-blog .container { max-width: 1180px; }

.wam-breadcrumb {
    font-size: 14px;
    color: #7d7d7d;
    margin-bottom: 26px;
    font-family: "Work Sans", sans-serif;
}
.wam-breadcrumb a { color: #7d7d7d; }
.wam-breadcrumb a:hover { color: #93F203; }
.wam-breadcrumb span { margin: 0 6px; opacity: .5; }
.wam-breadcrumb em { font-style: normal; color: #cfcfcf; }

.wam-cat {
    display: inline-block;
    font-family: "Space Grotesk", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #93F203;
    border: 1px solid rgba(147, 242, 3, .35);
    border-radius: 999px;
    padding: 4px 14px;
    margin-bottom: 18px;
}

/* ---------- cabeceras ---------- */
.wam-blog-hero, .wam-post-hero {
    padding: 40px 0 50px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.wam-blog-hero h1, .wam-post-hero h1 {
    font-family: "Space Grotesk", sans-serif;
    color: #fff;
    font-size: 52px;
    line-height: 1.12;
    letter-spacing: -.02em;
    margin: 0 0 22px;
    max-width: 900px;
}
.wam-post-lead {
    font-size: 20px;
    line-height: 1.62;
    color: #b6b6b6;
    max-width: 760px;
    margin: 0;
}
.wam-post-meta {
    margin: 24px 0 0;
    font-size: 14px;
    color: #7d7d7d;
    letter-spacing: .02em;
}

/* ---------- cuerpo del artículo ---------- */
.wam-post-body { padding: 56px 0 20px; }
.wam-prose { max-width: 760px; }
.wam-prose p {
    font-size: 18px;
    line-height: 1.78;
    color: #c6c6c6;
    margin: 0 0 22px;
}
.wam-prose h2 {
    font-family: "Space Grotesk", sans-serif;
    color: #fff;
    font-size: 31px;
    line-height: 1.25;
    letter-spacing: -.01em;
    margin: 52px 0 20px;
    padding-top: 10px;
}
.wam-prose h3 {
    font-family: "Space Grotesk", sans-serif;
    color: #fff;
    font-size: 21px;
    line-height: 1.35;
    margin: 34px 0 14px;
}
.wam-prose strong { color: #fff; font-weight: 600; }
.wam-prose a { color: #93F203; text-decoration: underline; text-underline-offset: 3px; }
.wam-prose a:hover { color: #b6ff4a; }
.wam-prose ul, .wam-prose ol {
    margin: 0 0 24px;
    padding-left: 22px;
}
.wam-prose li {
    font-size: 18px;
    line-height: 1.72;
    color: #c6c6c6;
    margin-bottom: 11px;
}
.wam-prose ul li::marker { color: #93F203; }
.wam-prose ol li::marker { color: #93F203; font-weight: 600; }

/* ---------- CTA ---------- */
.wam-cta { padding: 60px 0; }
.wam-cta-box {
    border: 1px solid rgba(147, 242, 3, .25);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(147, 242, 3, .07), rgba(147, 242, 3, .02));
    padding: 46px 42px;
    text-align: center;
}
.wam-cta-box h2 {
    font-family: "Space Grotesk", sans-serif;
    color: #fff;
    font-size: 32px;
    margin: 0 0 14px;
}
.wam-cta-box p {
    color: #b6b6b6;
    font-size: 17px;
    max-width: 560px;
    margin: 0 auto 28px;
}

/* ---------- listado ---------- */
.wam-cards { padding: 56px 0 10px; }
.wam-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}
.wam-card {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    background: #101010;
    transition: border-color .3s ease, transform .3s ease;
}
.wam-card:hover { border-color: rgba(147, 242, 3, .5); transform: translateY(-3px); }
.wam-card > a { display: block; padding: 32px 30px; height: 100%; }
.wam-card h2 {
    font-family: "Space Grotesk", sans-serif;
    color: #fff;
    font-size: 24px;
    line-height: 1.3;
    margin: 0 0 14px;
}
.wam-card p {
    color: #a8a8a8;
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 18px;
}
.wam-card-meta { font-size: 13px; color: #6f6f6f; }
.wam-card-lead { grid-column: 1 / -1; }
.wam-card-lead h2 { font-size: 34px; }
.wam-card-lead p { font-size: 18px; max-width: 720px; }

/* ---------- relacionados ---------- */
.wam-related { padding: 20px 0 80px; }
.wam-related h2 {
    font-family: "Space Grotesk", sans-serif;
    color: #fff;
    font-size: 26px;
    margin: 0 0 26px;
}
.wam-rel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.wam-rel-card {
    display: block;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    background: #101010;
    padding: 26px 24px;
    transition: border-color .3s ease;
}
.wam-rel-card:hover { border-color: rgba(147, 242, 3, .5); }
.wam-rel-card h3 {
    font-family: "Space Grotesk", sans-serif;
    color: #fff;
    font-size: 18px;
    line-height: 1.35;
    margin: 0;
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
    .wam-blog { padding-top: 96px; }
    .wam-blog-hero h1, .wam-post-hero h1 { font-size: 38px; }
    .wam-card-grid, .wam-rel-grid { grid-template-columns: 1fr; }
    .wam-card-lead h2 { font-size: 27px; }
    .wam-post-lead { font-size: 18px; }
    .wam-cta-box { padding: 34px 24px; }
    .wam-cta-box h2 { font-size: 26px; }
}
@media (max-width: 575px) {
    .wam-blog-hero h1, .wam-post-hero h1 { font-size: 31px; }
    .wam-prose p, .wam-prose li { font-size: 17px; }
    .wam-prose h2 { font-size: 26px; }
}

/* ---------- cabecera opaca (evita que el texto se transparente por debajo) ---------- */
.wam-blog-header,
.wam-blog-header.sticky {
    background: #0D0D0D !important;
    backdrop-filter: none;
}
.wam-blog-header.sticky {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}