/* Página Blog / Inspiración (/blog)
       Adaptación visual a la paleta T314 (crema/negro/mostaza/cobre). La
       página no tenía CSS propio: todo el aspecto venía de utilidades
       Tailwind (bg-slate-900, amber-600, gray-*) incrustadas en blog.php.
       No se toca la lógica de contenidos (WordPress API) ni los 6 artículos
       de relleno (fallback existente si la API falla): solo su color.

       Ojo: algunas utilidades (p.ej. text-gray-400) se reutilizan tanto
       sobre fondo negro (hero) como sobre fondo crema (metadatos de
       artículo), así que el override va por selector de ancestro. */
    .blog-page {
        --mostaza: var(--accent-color, #c9a227);
        --mostaza-oscuro: #b3901f;
        --crema: var(--bg-cream, #f9f7f2);
        --negro: var(--text-color, #2D2D2D);
        --texto-suave: #6b6558;
        --cobre: #a8622e;
        font-family: var(--font-secondary);
    }
    .blog-page .font-serif {
        font-family: var(--font-primary);
    }

    /* Botones: misma receta que .btn-accent del resto del sistema. */
    .blog-page .btn-accent {
        display: inline-block;
        background: var(--mostaza);
        color: #1f1a08;
        font-weight: 600;
        padding: 12px 28px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        transition: all 0.2s;
        box-shadow: 0 4px 14px rgba(201, 162, 39, 0.3);
        border: none;
        cursor: pointer;
    }
    .blog-page .btn-accent:hover,
    .blog-page .btn-accent:focus-visible {
        background: var(--mostaza-oscuro);
        color: #fff;
        transform: scale(1.02);
    }

    /* Hero: negro/tinta plano (antes bg-slate-900, azul-marino). */
    .blog-page .bg-slate-900 {
        background: var(--negro);
    }
    .blog-page .bg-slate-900 .text-gray-400 {
        color: rgba(249, 247, 242, 0.65);
    }

    /* Refinamiento de cabecera: escopeado a .t314-hero para no tocar las
       pastillas de filtro de categoría, que también usan bg-slate-900. */
    .blog-page .t314-hero {
        padding-block: 3.25rem;
    }
    @media (min-width: 768px) {
        .blog-page .t314-hero {
            padding-block: 6rem;
        }
    }
    .blog-page .t314-hero .hero-kicker {
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--mostaza);
        margin-bottom: 0.85rem;
    }
    .blog-page .t314-hero .hero-kicker::after {
        content: '';
        display: block;
        width: 44px;
        height: 2px;
        background: var(--cobre);
        margin: 0.75rem auto 0;
    }
    .blog-page .t314-hero h1 {
        font-size: clamp(3rem, 5vw, 5.25rem);
        line-height: 1;
        color: var(--crema);
    }
    .blog-page .t314-hero .text-gray-400 {
        color: #d8d3ca;
        font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
        line-height: 1.6;
    }

    /* Breadcrumb (fondo blanco) */
    .blog-page nav.bg-white {
        border-color: rgba(0, 0, 0, 0.06);
    }
    .blog-page nav .text-gray-500 {
        color: var(--texto-suave);
    }
    .blog-page nav .text-gray-300 {
        color: rgba(45, 45, 45, 0.25);
    }
    .blog-page nav .text-slate-900 {
        color: var(--negro);
    }
    .blog-page nav .hover\:text-amber-600:hover {
        color: var(--cobre);
    }

    /* Filtro de categorías: pastillas activa/inactiva */
    .blog-page .bg-slate-900.text-white {
        background: var(--negro);
    }
    .blog-page a.bg-white.text-slate-900 {
        background: #fff;
        color: var(--negro);
        border: 1px solid rgba(0, 0, 0, 0.08);
    }
    .blog-page a.bg-white.text-slate-900:hover {
        background: var(--crema);
        color: var(--cobre);
    }

    /* Aviso de error al cargar artículos */
    .blog-page .bg-amber-50 {
        background: rgba(201, 162, 39, 0.08);
        border-color: var(--mostaza) !important;
    }
    .blog-page .bg-amber-50 .text-amber-600 {
        color: var(--cobre);
    }
    .blog-page .bg-amber-50 .text-slate-900 {
        color: var(--negro);
    }
    .blog-page .bg-amber-50 .text-gray-600 {
        color: var(--texto-suave);
    }

    /* Tarjetas de artículo (reales o de relleno): misma estructura, solo color */
    .blog-page article .text-amber-600 {
        color: var(--cobre);
    }
    .blog-page article .text-gray-400 {
        color: var(--texto-suave);
        opacity: 0.6;
    }
    .blog-page article .text-gray-500 {
        color: var(--texto-suave);
    }
    .blog-page article .text-slate-900 {
        color: var(--negro);
    }
    .blog-page article a:hover .group-hover\:text-amber-600 {
        color: var(--cobre);
    }
    .blog-page article .text-gray-600 {
        color: var(--texto-suave);
    }
    .blog-page article .border-amber-600 {
        border-color: var(--cobre);
    }

    /* Newsletter (no funcional todavía: sin action/handler; se deja tal
       cual, solo se recolorea) */
    .blog-page section.bg-white .text-slate-900 {
        color: var(--negro);
    }
    .blog-page section.bg-white .text-gray-600 {
        color: var(--texto-suave);
    }
    .blog-page input.border-gray-300 {
        border-color: rgba(0, 0, 0, 0.15);
    }
    .blog-page input.focus\:border-amber-600:focus {
        border-color: var(--mostaza-oscuro);
    }