.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%}
/* =========================================================================
   SKIN "blog-epp" (opt-in) — sección de blog estilo tarjeta (como la captura):
   encabezado con subrayado cian + botón VER MÁS, y tarjetas con badge de
   categoría, fecha, título, extracto y botón "Leer más" ancho.
   Se activa con la clase "blog-epp" en el slider de blog:
     [oz_blog_posts id="XXXX" class="blog-epp"]  (o Avanzado -> Clase: blog-epp)
   ========================================================================= */
.blog-epp {
    --blog-cyan: #00a4d2;     /* acento cian (badge, subrayado, botón) */
    --blog-blue: #0a6798;     /* azul títulos */
    --blog-title: #16314a;    /* título de tarjeta */
    --blog-muted: #6b7280;    /* texto secundario */
}

/* ---------- Encabezado "Blogs" + VER MÁS ---------- */
.blog-epp .ozs__header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 14px;
    margin-bottom: 26px;
}
.blog-epp .ozs__header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: #d7dce3;
    pointer-events: none;
}
.blog-epp .ozs__header::before {
    content: "";
    position: absolute;
    left: 0; bottom: -1px;
    width: 140px; height: 3px;
    background: var(--blog-cyan);
    z-index: 1;
    pointer-events: none;
}
.blog-epp .ozs__header-text { padding-left: 0; }
.blog-epp .ozs__header-text::before { display: none; }
/* Título "Blogs": azul, sans-serif y compacto (no el serif negro del tema).
   Prefijo html body .ozs + !important para vencer a la fuente/tamaño del tema. */
html body .ozs.ozs--blog.blog-epp .ozs__title,
html body .ozs.ozs--blog.blog-epp .ozs__title a,
html body .ozs.ozs--blog.blog-epp .ozs__title .ozs__title-hl {
    margin: 0;
    color: #0a6798 !important;
    font-family: 'Roboto', system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.blog-epp .ozs__title::after { display: none !important; }
.blog-epp .ozs__cta {
    flex: 0 0 auto;
    align-self: center;
    padding: 9px 22px;
    background: transparent;
    color: var(--blog-blue);
    border: 1px solid #bcd3e6;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.blog-epp .ozs__cta:hover,
.blog-epp .ozs__cta:focus-visible {
    background: var(--blog-blue);
    color: #fff;
    border-color: var(--blog-blue);
}

/* ---------- Tarjeta ---------- */
.blog-epp .oz-blog-card {
    height: 100%;
    background: #fff;
    border: 1px solid #eef1f4;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 33, 61, .06);
    transition: transform .22s ease, box-shadow .22s ease;
}
.blog-epp .oz-blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0, 33, 61, .12);
}
.blog-epp .oz-blog-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
/* Imagen superior recortada */
.blog-epp .oz-blog-card__media {
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.blog-epp .oz-blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.blog-epp .oz-blog-card:hover .oz-blog-card__media img { transform: scale(1.04); }

.blog-epp .oz-blog-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px 18px 18px;
}
/* Fila superior: categoría (cian) + fecha (gris), separadas a los extremos */
.blog-epp .oz-blog-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.blog-epp .oz-blog-card__cat {
    color: var(--blog-cyan);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.blog-epp .oz-blog-card__date {
    color: var(--blog-muted);
    font-size: 12px;
}
/* Título: 2 líneas máx */
.blog-epp .oz-blog-card__title {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--blog-title);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 2.6em;
}
/* Extracto: 3 líneas máx, ocupa el espacio flexible */
.blog-epp .oz-blog-card__excerpt {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--blog-muted);
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* "Leer más": botón ancho cian sólido */
.blog-epp .oz-blog-card__readmore {
    display: block;
    margin-top: auto;
    padding: 12px 16px;
    border: 0;
    border-radius: 8px;
    background: var(--blog-cyan);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
    text-align: center;
    transition: background .2s ease;
}
.blog-epp .oz-blog-card__readmore:hover {
    background: #0a6798;
    color: #fff;
}

@media (max-width: 768px) {
    .blog-epp .ozs__header { margin-bottom: 18px; }
    .blog-epp .ozs__header::before { width: 96px; }
    .blog-epp .oz-blog-card__title { font-size: 16px; }
}

/* Aire abajo + espacio para que NO se recorte la sombra de las tarjetas.
   El viewport del carrusel tiene overflow:hidden y cortaba la sombra inferior;
   con padding en la pista, la sombra cae dentro del viewport y se ve. */
.blog-epp .ozs__track {
    padding-top: 4px;
    padding-bottom: 26px;
}
/* Sombra un poco más marcada para que se note. */
.blog-epp .oz-blog-card {
    box-shadow: 0 10px 26px rgba(0, 33, 61, 0.12);
}
.blog-epp .oz-blog-card:hover {
    box-shadow: 0 16px 34px rgba(0, 33, 61, 0.18);
}