/* El blog (2026-09-30): listado (home.php) y entrada (single.php) del tema propio. Usa los componentes
   de paginas-servicio.css (hero, bandas, grilla, cruce, cierre); acá va lo propio. */

/* ---------- Hero: renglones que se escriben ----------
   El motivo del blog son líneas de texto sobre una hoja cuadriculada, en los colores de la marca. */
.hero-blog::before {
    background:
        radial-gradient(36% 50% at 12% 18%, rgba(255, 22, 50, .40), transparent 68%),
        radial-gradient(32% 44% at 86% 20%, rgba(31, 184, 205, .40), transparent 70%),
        radial-gradient(30% 42% at 60% 96%, rgba(142, 117, 178, .38), transparent 72%);
    animation: bl-drift 10s ease-in-out infinite alternate;
}
.hero-blog .svc-hero-fx {
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 34px);
    background-size: 100% 34px;
    filter: none;
    -webkit-mask: radial-gradient(60% 70% at 70% 50%, #000 20%, transparent 80%);
    mask: radial-gradient(60% 70% at 70% 50%, #000 20%, transparent 80%);
    opacity: .7;
}
.hero-blog::after { background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px); background-size: 22px 22px; }
@keyframes bl-drift {
    from { transform: translate3d(-5%, -3%, 0) scale(1.04); }
    to   { transform: translate3d(6%, 4%, 0) scale(1.16); }
}
.bl-fecha { margin-top: -6px; }

/* ---------- Las tarjetas ---------- */
.svc-grid.bl-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .svc-grid.bl-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .svc-grid.bl-grilla { grid-template-columns: minmax(0, 1fr); } }
.bl-tarjeta { display: grid; align-content: start; gap: 8px; text-decoration: none; }
.bl-portada { display: block; aspect-ratio: 1200 / 630; margin: -4px -4px 6px; border-radius: 8px; overflow: hidden; background: var(--ground, #F2F5F7); }
.mdpd-svc .bl-portada img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.bl-tarjeta:hover .bl-portada img { transform: scale(1.04); }
.bl-meta { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #64748B; }
.is-dark .bl-meta { color: #94A3B8; }
.bl-tarjeta h3 { margin: 0; font-size: 20px; line-height: 1.3; }
.bl-vacio { font-size: 18px; color: #64748B; text-align: center; padding: 40px 0; }
.bl-paginas ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 40px 0 0; padding: 0; list-style: none; }
.bl-paginas a, .bl-paginas span { display: block; padding: 8px 14px; border-radius: 8px; border: 1px solid #E2E8EE; font-weight: 700; text-decoration: none; }
.bl-paginas .current { background: var(--ink, #1E293B); color: #fff; border-color: transparent; }

/* ---------- La nota: una columna de lectura ---------- */
.bl-articulo { max-width: 740px; margin: 0 auto; font-size: 18px; line-height: 1.75; color: #1E293B; }
.bl-articulo > * + * { margin-top: 1.1em; }
.bl-articulo .bl-imagen { margin: 1.8em 0 2em; border-radius: 12px; overflow: hidden; }
.mdpd-svc .bl-imagen img { display: block; width: 100%; height: auto; }
.bl-articulo h2 { margin-top: 2em; font-size: 30px; line-height: 1.25; font-weight: 300; }
.bl-articulo h2 strong { font-weight: 800; }
.bl-articulo h3 { margin-top: 1.6em; font-size: 22px; line-height: 1.3; font-weight: 700; }
.bl-articulo ul, .bl-articulo ol { padding-left: 1.3em; }
.bl-articulo li + li { margin-top: .4em; }
.bl-articulo a { color: var(--brand, #FF1632); text-decoration: underline; text-underline-offset: 3px; }
.bl-articulo blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--brand, #FF1632); font-size: 20px; line-height: 1.6; color: #334155; }
.bl-articulo table { width: 100%; border-collapse: collapse; font-size: 16px; }
.bl-articulo th, .bl-articulo td { padding: 10px 12px; border-bottom: 1px solid #E2E8EE; text-align: left; vertical-align: top; }
.bl-articulo th { font-size: 14px; letter-spacing: .03em; text-transform: uppercase; color: #64748B; }
/* La idea clave de la nota, en un recuadro */
.bl-articulo .bl-clave { padding: 18px 22px; border-radius: 12px; background: #F2F5F7; border: 1px solid #E2E8EE; }
.bl-articulo .bl-clave strong:first-child { display: block; margin-bottom: 4px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--brand, #FF1632); }
@media (max-width: 620px) {
    .bl-articulo { font-size: 17px; }
    .bl-articulo h2 { font-size: 26px; }
}

/* El emblema del listado (Emir, 2026-09-30): el icono de la empresa con los anillos que laten, los mismos
   de la cifra de años de la portada, a la derecha del título. Va posicionado sobre el hero para no
   cambiarle la altura; los anillos que sobresalen los recorta el propio hero. */
.bl-emblema { position: absolute; right: max(40px, calc((100% - 1200px) / 2 + 40px)); top: 50%; width: 150px; height: 150px; margin-top: -75px; display: grid; place-items: center; z-index: 0; pointer-events: none; }
.bl-emblema::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 380px; height: 380px; margin: -190px 0 0 -190px; border-radius: 50%;
    background-image:
        repeating-radial-gradient(circle, transparent 0 9px, rgba(255, 205, 87, .3) 9px 10px),
        repeating-radial-gradient(circle at 51.5% 48.5%, transparent 0 13px, rgba(255, 255, 255, .1) 13px 14px);
    -webkit-mask-image: radial-gradient(circle closest-side, #000 30%, transparent 100%);
    mask-image: radial-gradient(circle closest-side, #000 30%, transparent 100%);
    animation: bl-crecer 9s ease-in-out infinite alternate;
}
.bl-emblema::after { content: ""; position: absolute; left: 50%; top: 50%; width: 250px; height: 250px; margin: -125px 0 0 -125px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 22, 50, .45), transparent 68%); }
.mdpd-svc .bl-emblema img { position: relative; z-index: 1; width: 130px; height: 130px; max-width: none; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .5)); }
@keyframes bl-crecer { from { transform: scale(.94); } to { transform: scale(1.06); } }
@media (max-width: 880px) { .bl-emblema { display: none; } }
@media (prefers-reduced-motion: reduce) { .bl-emblema::before { animation: none; } }

/* Encabezado solo para lectores de pantalla */
.bl-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }