@charset "utf-8";

/* ==========================================================================
   TECHND FEATURED CONTENT — ESTILOS DEL COMPONENTE
   --------------------------------------------------------------------------
   PROPÓSITO:
   Define la presentación visual del componente reutilizable Featured Content
   de TechND. El bloque está preparado para integrarse en distintas áreas del
   dominio sin modificar el comportamiento global de la plantilla.

   ALCANCE:
   - Todos los estilos quedan encapsulados bajo .component-featured-content.
   - El componente ocupa el ancho disponible de su contenedor padre.
   - No utiliza 100vw ni márgenes calculados para extenderse fuera del layout.
   - No modifica #main-content, .page-wrapper, body ni otros wrappers globales.
   - overflow:clip mantiene contenidos y elementos decorativos dentro del
     componente sin crear un contenedor de desplazamiento.
   - Las clases nativas de TechND/Oitech se reutilizan únicamente cuando forman
     parte del markup del componente, sin redefinirlas de forma global.

   INTEGRACIÓN:
   Hoja de estilos recomendada:
   /assets/plugins/featured-content/featured-content.css

   CLASE RAÍZ DEL COMPONENTE:
   .component-featured-content

   NOTA DE MANTENIMIENTO:
   Las reglas nuevas del componente deben permanecer bajo esta clase raíz para
   evitar cruces con otros módulos, plantillas o plugins del dominio.
   ========================================================================== */


/* ===================== CONTENEDOR PRINCIPAL =====================
   Define el contexto estructural del componente, su fondo y el borde superior.
   El ancho se limita al espacio real disponible del elemento padre para evitar
   desbordamientos horizontales. overflow:clip recorta los elementos decorativos
   sin alterar el comportamiento de scroll de la página.
   ========================================================================== */

.component-featured-content{
    position:relative;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    overflow:clip;
    background:#f1f1f1;
    border-top:4px solid #83a5c6;
}


/* ===================== ELEMENTOS DECORATIVOS DE FONDO =====================
   Los círculos añaden profundidad visual al bloque sin formar parte del contenido.
   Permanecen contenidos por overflow:clip y no participan en la interacción.
   ========================================================================== */

.component-featured-content::before{
    content:"";
    position:absolute;
    right:-120px;
    top:-170px;
    width:430px;
    height:430px;
    border:1px solid rgba(131,165,198,.16);
    border-radius:50%;
}

.component-featured-content::after{
    content:"";
    position:absolute;
    right:60px;
    top:-90px;
    width:260px;
    height:260px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:50%;
}


/* ===================== ENCABEZADO DEL COMPONENTE =====================
   Ajusta únicamente el encabezado .sec-title cuando se encuentra dentro del
   Featured Content. No altera la definición global utilizada por otras páginas.
   ========================================================================== */

.component-featured-content .sec-title{
    position:relative;
    z-index:2;
    margin-bottom:28px;
}

.component-featured-content .sec-title .sub-title{
    /*color:#9ab6d0;*/
    color:#094987;
    font-weight:bold;
}

.component-featured-content .sec-title .sub-title::before{
    background-color:#83a5c6;
}

.component-featured-content .sec-title h2{
    color:#fff;
}


/* ===================== ESTRUCTURA PRINCIPAL DEL FEATURED =====================
   Organiza el bloque destacado en dos columnas: imagen editorial y contenido.
   minmax(0,1fr) permite que la columna de texto pueda contraerse correctamente
   sin provocar desbordamientos horizontales.
   ========================================================================== */

.component-featured-content .featured-content__spotlight{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:320px minmax(0,1fr);
    gap:42px;
    align-items:center;
}


/* ===================== IMAGEN DESTACADA =====================
   Define el contenedor visual de la imagen, su proporción vertical y el acabado
   de tarjeta. La imagen utiliza object-fit:cover para conservar el encuadre.
   ========================================================================== */

.component-featured-content .featured-content__poster{
    position:relative;
    min-height:390px;
    overflow:hidden;
    background:#0d223d;
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    box-shadow:0 22px 46px rgba(0,0,0,.22);
}

.component-featured-content .featured-content__poster img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.component-featured-content .featured-content__poster::before{
    content:"";
    position:absolute;
    z-index:1;
    inset:0;
    background:linear-gradient(
            0deg,
            rgba(5,13,24,.88) 0%,
            rgba(5,13,24,.18) 62%,
            rgba(5,13,24,.08) 100%
    );
}


/* ===================== ETIQUETA E INFORMACIÓN SOBRE LA IMAGEN =====================
   Coloca la identificación del contenido destacado y el texto editorial sobre
   la fotografía. Los z-index mantienen ambos elementos por encima del degradado.
   ========================================================================== */

.component-featured-content .featured-content__poster-label{
    position:absolute;
    z-index:2;
    top:20px;
    left:20px;
    padding:7px 10px;
    background:#83a5c6;
    color:#fff;
    border-radius:3px;
    font-size:10px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.component-featured-content .featured-content__poster-copy{
    position:absolute;
    z-index:2;
    left:22px;
    right:22px;
    bottom:22px;
}

.component-featured-content .featured-content__poster-copy strong{
    display:block;
    color:#fff;
    font-family:var(--title-font);
    font-size:22px;
    line-height:1.25;
    font-weight:600;
}


/* ===================== CONTENIDO EDITORIAL =====================
   Define la columna de texto del webinar destacado. min-width:0 evita que textos
   largos obliguen al grid a crecer más allá del ancho disponible.
   ========================================================================== */

.component-featured-content .featured-content__content{
    min-width:0;
    padding:4px 0;
}

.component-featured-content .featured-content__content h2{
    max-width:780px;
    margin:0 0 18px;
    color:#656565;
    font-size:44px;
    line-height:1.1;
    letter-spacing:-.015em;
}

.component-featured-content .featured-content__lead{
    max-width:760px;
    margin:0 0 28px;
    color:#545454;
    font-size:17px;
    line-height:1.72;
}


/* ===================== SEPARADOR =====================
   Marca visualmente la transición entre la descripción y las acciones sin crear
   una nueva caja ni alterar el flujo del contenido.
   ========================================================================== */

.component-featured-content .featured-content__divider{
    width:100%;
    height:1px;
    margin:0 0 30px;
    background:rgba(26,26,26,.11);
}


/* ===================== ACCIONES =====================
   Agrupa el CTA principal y el enlace secundario. flex-wrap permite que ambos
   elementos se acomoden sin provocar overflow cuando disminuye el ancho útil.
   ========================================================================== */

.component-featured-content .featured-content__actions{
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.component-featured-content .featured-content__all-link{
    color:#424242;
    font-size:13px;
    font-weight:700;
}

.component-featured-content .featured-content__all-link:hover{
    color:#5ea7ee;
    font-weight:bold;
}


/* ===================== RESPONSIVE — TABLET =====================
   Reduce el ancho reservado para la imagen y el tamaño del título manteniendo
   la composición en dos columnas mientras exista espacio suficiente.
   ========================================================================== */

@media only screen and (max-width:991.98px){

    .component-featured-content .featured-content__spotlight{
        grid-template-columns:260px minmax(0,1fr);
        gap:30px;
    }

    .component-featured-content .featured-content__content h2{
        font-size:36px;
    }

    .component-featured-content .featured-content__poster{
        min-height:360px;
    }
}


/* ===================== RESPONSIVE — MÓVIL =====================
   Convierte el layout a una sola columna para que imagen y contenido se apilen.
   El título reduce nuevamente su tamaño y la imagen mantiene una altura adecuada
   para dispositivos con menor ancho de pantalla.
   ========================================================================== */

@media only screen and (max-width:767.98px){

    .component-featured-content .featured-content__spotlight{
        grid-template-columns:1fr;
    }

    .component-featured-content .featured-content__poster{
        min-height:340px;
    }

    .component-featured-content .featured-content__content h2{
        font-size:31px;
    }
}