.oz-blog-card--compact .oz-blog-card__link{display:flex;gap:12px;align-items:flex-start}.oz-blog-card--compact .oz-blog-card__media{flex:0 0 40%}.oz-blog-card__readmore,.ozs-blog__readmore{display:inline-block;margin-top:auto;padding:8px 16px;border:1px solid var(--oz-accent,#111);border-radius:4px;color:var(--oz-accent,#111);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.4px;transition:background .2s,color .2s}.oz-blog-card__readmore:hover,.ozs-blog__readmore:hover{background:var(--oz-accent,#111);color:#fff}.oz-blog-card__link,.ozs-blog__link{text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%}.oz-blog-card .oz-blog-card__body,.ozs-blog__body{display:flex;flex-direction:column;flex:1;padding:14px 16px 16px}.oz-blog-card__title,.ozs-blog__title{font-size:16px;margin:0 0 6px;color:var(--oz-heading-color,inherit)}.oz-blog-card__excerpt,.ozs-blog__excerpt{font-size:13px;color:var(--oz-text-muted,#666);margin:0 0 12px;flex:1}.oz-blog-card__meta,.ozs-blog__meta{font-size:12px;color:var(--oz-text-muted,#999);margin-bottom:8px;display:flex;gap:10px}.ozs--layout-post_compact .oz-blog-card__link{display:flex;gap:12px;align-items:flex-start}.ozs--layout-post_compact .oz-blog-card__media{flex:0 0 40%}

/* ─────────────────────────────────────────────────────────────
   Tarjeta de blog estilo Figma: imagen + badge de fecha,
   categoría con icono, título, extracto y "Leer más →".
   ───────────────────────────────────────────────────────────── */
.ozs--blog {
    --blogcard-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --blogcard-blue: #1b3f95;
    --blogcard-ink: #0f1a30;
    --blogcard-muted: #5b6472;
}
/* Espacio en el viewport para que la sombra de las tarjetas no se recorte
   (el carrusel usa overflow:hidden). Sin margen horizontal negativo para
   no provocar scroll horizontal en la página. */
.ozs--blog .ozs__viewport {
    overflow: hidden;
    padding: 16px 26px 36px;
    margin: -16px 0 -20px;
}
/* El track es un flex con align-items:stretch + overflow-y:hidden. Las
   tarjetas se estiran a la altura completa del track, asi que su borde
   inferior queda justo en el borde de recorte y se ve cortado. Un pequeno
   padding-bottom deja respirar ese borde (antes lo tapaba la sombra). */
.ozs--blog .ozs__track {
    padding-bottom: 4px;
}
.ozs--blog .oz-blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    /* Borde casi imperceptible en lugar de sombra: la sombra (box-shadow) se
       desbordaba a los lados y en el hueco entre tarjetas se veia recortada
       por el overflow:hidden del carrusel. */
    border: 1px solid rgba(15, 26, 48, 0.06);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: none;
}
.ozs--blog .oz-blog-card__link {
    height: 100%;
}

/* Imagen + badge */
.ozs--blog .oz-blog-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 0;
    font-size: 0;
}
.ozs--blog .oz-blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ozs--blog .oz-blog-card__date-badge {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    min-width: 60px;
    background: var(--blogcard-blue);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(1, 10, 40, 0.28);
    font-family: var(--blogcard-font);
    line-height: 1;
    text-align: center;
}
.ozs--blog .oz-blog-card__cal {
    width: 15px;
    height: 15px;
    margin-bottom: 5px;
    opacity: 0.95;
}
.ozs--blog .oz-blog-card__date-day {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.2px;
}
.ozs--blog .oz-blog-card__date-my {
    margin-top: 3px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.6px;
}

/* Cuerpo */
.ozs--blog .oz-blog-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 18px 18px 20px;
    font-family: var(--blogcard-font);
}

/* Categoría con icono */
.ozs--blog .oz-blog-card__cat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--blogcard-blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.ozs--blog .oz-blog-card__cat-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

/* Título */
.ozs--blog .oz-blog-card__title {
    margin: 0;
    color: var(--blogcard-ink);
    font-size: 1.18rem;
    font-weight: 800;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Extracto */
.ozs--blog .oz-blog-card__excerpt {
    margin: 0;
    color: var(--blogcard-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Leer más → (link, no botón) */
.ozs--blog .oz-blog-card__readmore {
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--blogcard-blue);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}
.ozs--blog .oz-blog-card__readmore:hover {
    background: none;
    color: var(--blogcard-blue);
}
.ozs--blog .oz-blog-card__arrow {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}
.ozs--blog .oz-blog-card__link:hover .oz-blog-card__arrow {
    transform: translateX(4px);
}