/* ============================================================
   Sistema de diseño de los bloques del inicio (RF-02 y RF-03)
   ============================================================

   Este archivo lo comparten TRES vistas y esa es la razón de que exista
   en vez de ir en un <style> dentro de cada plantilla, como hacen otras
   secciones del tema:

     · home_7.php            -> diplomados destacados (RF-02)
     · home_7.php            -> formaciones en vivo (RF-03)
     · diplomados_page.php   -> catálogo completo en /pregrabados

   Los dos requerimientos piden lo mismo: que las tarjetas de una sección
   se vean iguales a las de la otra. Con los estilos duplicados en cada
   plantilla eso dura hasta la primera corrección que alguien haga en una
   sola de ellas.

   SOBRE LOS PREFIJOS
   El prefijo "dip-" es histórico: los diplomados fueron el primer bloque
   que usó este sistema. Hoy es el prefijo del esqueleto COMPARTIDO
   (sección, encabezado, grilla, tarjeta, beneficios, carrusel) y lo usan
   las tres vistas. El prefijo "fev-" es solo para lo propio de las
   formaciones en vivo: el distintivo EN VIVO y la línea de fecha y hora.

   Los colores neutros salen de las variables del tema (--color-1,
   --color-3, --bg-white) para que el modo oscuro siga funcionando. Los
   azules sí son literales: son el azul corporativo, no el morado
   --color-4 del tema, que es justo lo que se pidió quitar de aquí.
   ============================================================ */

/* == Escala tipografica ==============================================
   Los tamanos de estos bloques salen de esta lista y no de lo que pida cada
   componente por su cuenta. Antes habia 13.5, 14.5 y 12.5px: valores a medio
   pixel que no coincidian con nada. El tema usa enteros --40 para el titulo
   de pagina, 16 para el de tarjeta, 14 para los parrafos--, asi que el texto
   de una tarjeta de diplomado se veia medio punto mas chico que el de una
   tarjeta de curso en la misma pantalla.

     32px  titulo de bloque      (el h1 de pagina es 40 y el hero 56)
     16px  titulo de tarjeta     igual que .courses-text h5 del tema
     15px  subtitulo y enlaces del encabezado
     14px  parrafos y controles  igual que .courses-text p del tema
     13px  texto secundario      (beneficios, fecha y hora)
     12px  etiquetas
     11px  marcas sobre la foto  (EN VIVO, categoria en formaciones)

   Nada de esto toca las hojas del tema: son reglas propias de estos bloques.
   Cambiar la tipografia del resto del sitio es otra tarea y otro riesgo. */

.dip-section {
    /* Los tres tonos salen de la paleta que se elige en
       Admin > Configuración > Personalización de colores. El valor tras la
       coma es el respaldo: es lo que se ve si el módulo no está configurado,
       y es exactamente el color con el que se diseñaron estos bloques. */
    --dip-blue: var(--brand-secondary, #1e40af);          /* fondos destacados */
    --dip-blue-strong: var(--brand-primary, #2563eb);     /* botones y enlaces */
    --dip-blue-soft: var(--brand-primary-soft, #eff4ff);  /* fondos de ícono y badges */
    /* Sobre un fondo oscuro el borde gris claro de la tarjeta desaparece y el
       bloque se ve plano. brand_helper lo decide con el mismo criterio de
       luminancia que usa para el texto. */
    --dip-line: var(--brand-section-line, #e4eaf3);

    padding: 70px 0;
    /* Fondo gestionable desde Admin > Configuración > Personalización de
       colores. El valor tras la coma es el respaldo: el gris con el que se
       diseñaron los bloques, que es lo que se ve si el módulo no está
       configurado. */
    background: var(--brand-section-bg, #f8fafc);
}

/* En el catálogo la sección va sobre el breadcrumb, que ya trae su
   propio fondo; ahí la franja gris de arriba sobra. */
.dip-section--plain {
    background: transparent;
}


/* ── Encabezado ───────────────────────────────────────────────────────
   Alineado a la izquierda, con el enlace "Ver todos" empujado al
   extremo derecho y alineado con la línea del título, no con el
   subtítulo. En móvil el enlace baja debajo del subtítulo. */
.dip-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 34px;
}

.dip-head__title {
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--color-1);
    margin: 0;
}

.dip-head__title span {
    color: var(--dip-blue-strong);
}

/* Subrayado corto bajo el título. Es el único adorno del encabezado:
   ancla la alineación izquierda, que sin él se lee como texto suelto. */
.dip-head__rule {
    width: 52px;
    height: 3px;
    border-radius: 3px;
    background: var(--dip-blue-strong);
    margin: 12px 0 10px;
}

.dip-head__subtitle {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-3);
    margin: 0;
    max-width: 640px;
}

.dip-head__link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--dip-blue-strong);
    text-decoration: none;
    transition: color .2s ease;
}

.dip-head__link:hover {
    color: var(--dip-blue);
}

.dip-head__link i {
    transition: transform .2s ease;
}

.dip-head__link:hover i {
    transform: translateX(4px);
}


/* ── Grilla ───────────────────────────────────────────────────────────
   Grid y no columnas de Bootstrap: las tarjetas tienen que quedar todas
   de la misma altura sin depender de h-100 en cada una, y el carrusel
   reutiliza la misma tarjeta dentro de sus propios items.

   TRES columnas, no cuatro. A cuatro la tarjeta mide 259px y la portada
   -- que en las dos secciones es un afiche cuadrado de 1254x1254 -- se ve
   al 21% de su tamano: a esa escala el texto que el afiche trae impreso no
   se puede leer. A tres son 356px, un 37% mas grande, que es la diferencia
   entre adivinar y leer.

   Si se vuelve a cuatro hay que cambiar tambien $diplomados_per_view en
   home_7.php, que es lo que decide cuando el bloque pasa a carrusel. */
.dip-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}


/* ── Tarjeta ──────────────────────────────────────────────────────────
   Es el componente que el requerimiento pide idéntico en la home y en
   el catálogo. Cualquier cambio aquí sale en los dos sitios. */
.dip-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-white);
    border: 1px solid var(--dip-line);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease;
}

.dip-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(30, 41, 59, .14);
}

/* La caja toma la proporcion 4:3 en vez de un alto fijo.

   Las portadas de las dos secciones son cuadradas (1254x1254). Con la caja
   de 168px se tiraba el 35% del alto; con 4:3 se recorta el 25%, y lo que se
   pierde es el pie del afiche -- la letra legal y el "Siguenos en" --, que es
   lo unico que no aporta.

   No se pone 1:1, que mostraria el afiche entero, precisamente porque
   entonces entra tambien ese pie de letra pequena. */
.dip-card__media {
    position: relative;
    height: auto;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--dip-blue-soft);
}

/* El recorte se ancla arriba. Los afiches ponen el antetitulo y el titular
   arriba; centrando el recorte se cortaba justo por ahi. */
.dip-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform .45s ease;
}

.dip-card:hover .dip-card__media img {
    transform: scale(1.06);
}

/* Sin velo sobre la portada.

   El degradado estaba para que la etiqueta blanca se leyera sobre una imagen
   clara, pero tanto la etiqueta como el icono llevan su propio fondo blanco
   al 90% con desenfoque detras: se leen sin ayuda. Lo unico que hacia el
   degradado era apagar el titular que el afiche trae impreso, que es
   justamente lo que hay que poder leer.

   El pseudo-elemento se queda declarado, vacio, para no tener que volver a
   meter un div si algun dia hace falta un tratamiento sobre la imagen. */
.dip-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: none;
}

/* Ícono redondo arriba a la DERECHA y etiqueta de la categoría abajo a la
   izquierda.
   
   Estaba a la izquierda y ahí competía con lo que se lee primero: el título y
   el nombre del programa se alinean a la izquierda en toda la vista, así que
   el ícono caía justo encima de ese recorrido. A la derecha queda en la
   esquina libre y deja de estorbar. Se aplica a TODAS las tarjetas que usan
   este componente, no solo a los diplomados.
   
   Baja de 38 a 34px por lo mismo: sobre una foto de 168px de alto, 38px se
   comían demasiada imagen. */
.dip-card__icon {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: var(--dip-blue);
    font-size: 15px;
    backdrop-filter: blur(4px);
}

/* Abajo a la DERECHA, alineada con el ícono de la categoría que va arriba en
   esa misma esquina. Estaba a la izquierda, que es justo donde los afiches
   traen impreso el título del programa: la etiqueta le caía encima. Con las
   dos marcas del mismo lado, la mitad izquierda del afiche queda libre. */
/* Separacion sobre cualquier portada.

   Al quitar el velo hubo que resolver lo que el velo resolvia: una etiqueta
   blanca sobre un afiche claro se pierde. Se resuelve en el elemento -- una
   sombra suave que lo despega del fondo -- y no oscureciendo la imagen
   entera, que era el remedio peor que la enfermedad. */
.dip-card__icon,
.dip-card__badge {
    box-shadow: 0 1px 6px rgba(15, 23, 42, .25);
}

.dip-card__badge {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 24px);
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color:var(--brand-text, #1e293b);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: blur(4px);
}

.dip-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px;
}

/* Los recortes a 2 y 3 líneas son lo que mantiene las tarjetas parejas
   con títulos y descripciones de largos distintos. El min-height del
   título reserva las dos líneas aunque el título ocupe una sola. */
.dip-card__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-1);
    margin: 0 0 8px;
    min-height: 2.7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dip-card__text {
    flex: 1;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-3);
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dip-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: auto;
    padding: 11px 14px;
    border-radius: 10px;
    background: var(--dip-blue-strong);
    color: var(--brand-on-primary, #fff);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease;
}

.dip-card__cta:hover {
    background: var(--brand-primary-hover, var(--dip-blue));
    color: var(--brand-on-primary, #fff);
}

.dip-card__cta i {
    transition: transform .2s ease;
}

.dip-card__cta:hover i {
    transform: translateX(4px);
}

/* Un diplomado sin asesor ni número general de respaldo no tiene a dónde
   mandar al visitante. En vez de dibujar un botón muerto se muestra el
   aviso, que ocupa el mismo alto y no descuadra la grilla. */
.dip-card__cta--muted {
    background: var(--dip-blue-soft);
    color: var(--color-3);
    cursor: default;
}

.dip-card__cta--muted:hover {
    background: var(--dip-blue-soft);
    color: var(--color-3);
}


/* ── Franja de beneficios ─────────────────────────────────────────────
   Cierra el bloque con la propuesta de valor. Va separada por una línea
   y no por un fondo distinto: es un pie del bloque, no otra sección. */
.dip-benefits {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 46px;
    padding-top: 34px;
    border-top: 1px solid var(--dip-line);
}

.dip-benefit {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.dip-benefit__icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--dip-blue-soft);
    color: var(--dip-blue-strong);
    font-size: 17px;
}

/* Icono propio subido desde el panel. Se limita a la caja del icono y se
   escala sin deformarse: un SVG de marca puede venir con cualquier relacion
   de aspecto. */
.dip-benefit__img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.dip-benefit__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-1);
    margin: 2px 0 3px;
}

.dip-benefit__text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-3);
    margin: 0;
}


/* ── Carrusel (Owl) ───────────────────────────────────────────────────
   Owl Carousel ya viene cargado en todas las páginas del frontend
   (includes_top.php + includes_bottom.php), así que la franja no suma
   ninguna descarga: solo se le reescriben las flechas, que por defecto
   son dos botones grises pegados debajo del carrusel. */
.dip-carousel .owl-stage {
    display: flex;
}

/* Sin esto los items de Owl toman la altura de su contenido y las
   tarjetas de una misma fila quedan disparejas. */
.dip-carousel .owl-item {
    display: flex;
    height: auto;
}

.dip-carousel .owl-item > * {
    width: 100%;
}

.dip-carousel .owl-nav {
    margin: 0;
}

.dip-carousel .owl-nav button.owl-prev,
.dip-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-white);
    border: 1px solid var(--dip-line);
    box-shadow: 0 6px 18px rgba(30, 41, 59, .12);
    color: var(--dip-blue);
    font-size: 15px;
    transition: background .2s ease, color .2s ease;
}

.dip-carousel .owl-nav button.owl-prev:hover,
.dip-carousel .owl-nav button.owl-next:hover {
    background: var(--dip-blue-strong);
    color: var(--brand-on-primary, #fff);
}

/* Fuera del carrusel, no encima. A -21px la flecha quedaba medio metida
   sobre la primera tarjeta: 34px de solape medidos sobre el diseño real.
   -62px deja 20px de aire entre la flecha y la tarjeta. Cabe mientras el
   margen lateral del .container lo permita: de 1280px de viewport en
   adelante quedan 8px hasta el borde de la ventana. */
/* El "left: auto" de la flecha derecha no es adorno. El tema trae reglas
   propias para sus carruseles que dejan un `left` puesto sobre .owl-next;
   con `left` y `right` fijados a la vez y un ancho definido, en LTR el
   navegador descarta el `right` y la flecha se iba a x=-158, fuera de la
   pantalla por la izquierda. Comprobado sobre el diseño real: al forzar
   `left: auto` vuelve a su sitio, 8px a la derecha del carrusel. */
.dip-carousel .owl-nav button.owl-prev { left: -62px; right: auto; }
.dip-carousel .owl-nav button.owl-next { right: -62px; left: auto; }

.dip-carousel .owl-nav button.disabled {
    opacity: .4;
    cursor: default;
}

.dip-carousel .owl-dots {
    margin-top: 26px;
    text-align: center;
}

.dip-carousel .owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    margin: 0 4px;
    background: #cbd5e1;
    transition: width .25s ease, background .25s ease;
}

.dip-carousel .owl-dots .owl-dot.active span {
    width: 22px;
    background: var(--dip-blue-strong);
}


/* ── Filtros de categoría (solo catálogo) ─────────────────────────── */
.dip-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.dip-filter {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--dip-line);
    background: var(--bg-white);
    color: var(--color-3);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.dip-filter i {
    margin-right: 6px;
}

.dip-filter:hover {
    border-color: var(--dip-blue-strong);
    color: var(--dip-blue-strong);
}

.dip-filter.active {
    background: var(--dip-blue-strong);
    border-color: var(--dip-blue-strong);
    color: var(--brand-on-primary, #fff);
}

.dip-empty {
    padding: 48px 0;
    text-align: center;
    color: var(--color-3);
}


/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1279px) {
    /* Aquí ya no hay margen lateral donde ponerlas y toca meterlas dentro.
       Se suben a la altura de la foto (168px de alto -> centro en 84) en vez
       de dejarlas centradas en la tarjeta: encima de la imagen molestan,
       encima del título y del botón tapan lo que hay que leer y pulsar. */
    .dip-carousel .owl-nav button.owl-prev,
    .dip-carousel .owl-nav button.owl-next {
        top: 84px;
        transform: none;
    }

    .dip-carousel .owl-nav button.owl-prev { left: 10px; right: auto; }
    .dip-carousel .owl-nav button.owl-next { right: 10px; left: auto; }
}

@media (max-width: 991px) {
    .dip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dip-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dip-head__title { font-size: 27px; }
}

@media (max-width: 767px) {
    .dip-section { padding: 48px 0; }

    /* El enlace "Ver todos" deja de caber al lado del título. */
    .dip-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 26px;
    }

    .dip-head__link { margin-top: 0; }
}

@media (max-width: 575px) {
    .dip-grid { grid-template-columns: minmax(0, 1fr); }
    .dip-benefits { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .dip-head__title { font-size: 24px; }
}


/* ── Formaciones en vivo (RF-03) ──────────────────────────────────────
   Añadidos sobre la misma tarjeta .dip-card, no una tarjeta aparte: el
   requerimiento pide que las dos secciones se vean iguales. Lo único
   propio de una formación es que es en vivo y que tiene fecha y hora. */

/* El distintivo ocupa la esquina que dejó libre el ícono de categoría:
   arriba a la DERECHA.
   
   Las dos etiquetas de esta tarjeta van ahora del mismo lado —el distintivo
   arriba y la categoría abajo, las dos a la derecha— y el motivo es la
   portada: las que manda SGF traen el título y el subtítulo impresos sobre
   la mitad IZQUIERDA de la propia imagen. Dejando ese lado libre, las
   etiquetas dejan de encimarse con un texto que ya está ahí. */
.fev-live {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #e11d48;
    color: var(--brand-on-primary, #fff);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    line-height: 1;
}

/* Una formación que todavía no empieza no está "en vivo". Mismo lugar y
   misma forma, otro color, para que se distinga de un vistazo. */
.fev-live--proxima {
    background: var(--dip-blue-strong);
}

.fev-live__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

.fev-live:not(.fev-live--proxima) .fev-live__dot {
    animation: fev-pulse 1.4s infinite;
}

@keyframes fev-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.8); }
}

@media (prefers-reduced-motion: reduce) {
    .fev-live__dot { animation: none; }
}

/* Fecha y hora, arriba del título. En la referencia van encima de la foto,
   pero ahí ya conviven el ícono de la categoría, su etiqueta y el
   distintivo EN VIVO: un cuarto elemento sobre la imagen deja de leerse.
   Aquí arrancan el cuerpo de la tarjeta, que es donde se buscan. */
.fev-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 10px;
}

.fev-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--dip-blue);
}

.fev-meta i {
    font-size: 12px;
    opacity: .8;
}


/* ── Lo único propio de la tarjeta de formación en vivo ───────────────

   Las dos secciones comparten .dip-card entero: misma rejilla, misma caja de
   imagen, mismo recorte, mismos tamaños de texto. Aquí abajo solo queda lo
   que de verdad distingue a una formación en vivo de un diplomado
   pregrabado, que es su distintivo EN VIVO y su línea de fecha y hora.

   Si algo de esto crece, conviene preguntarse antes si no debería ir a la
   base y valer para las dos: la falta de homogeneidad entre las dos
   secciones venía justamente de haber ido resolviendo cada una por su lado. */

/* Sin ícono de categoría. Se retira del marcado, no se oculta; esta regla
   queda como red por si alguna vista vuelve a incluirlo. */
.fev-card .dip-card__icon {
    display: none;
}