/* ============================================================


   LOCAL OVERRIDES — cargado desde servidor local, no CDN


   Agregar aquí todos los estilos que se quieran sobreescribir


   sin necesidad de actualizar la CDN.


   ============================================================ */





/* ---- Efecto angular en tarjetas de noticias (home) ----


   Genera un borde inferior diagonal en las imágenes de las


   notas y un label de categoría en forma de paralelograma.


   -------------------------------------------------------- */





.noticia-principal-new,


.noticia-principal-chica-new {


    overflow: hidden;


}





/* Corte diagonal en el borde inferior de la imagen */


.noticia-principal-new > img.img-fluid,


.noticia-principal-chica-new > img.img-fluid {


    clip-path: polygon(0 0, 100% 0, 100% 87%, 0% 100%);


    display: block;


    width: 100%;


}





/* Categoría en paralelograma (ángulo en el borde derecho) */


.noticia-principal-new .categoria,


.noticia-principal-chica-new .categoria,


.oc-item-new .categoria {


    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);


    padding: 2px 50px 2px 15px;


}





/* ---- Logo del sitio — ancho máximo 280px, sin distorsión ---- */


#logo img {


    max-width: 280px !important;


    width: auto !important;


    height: auto !important;


    object-fit: contain;


}





/* Footer logo — misma regla */


#footer #logo img {


    max-width: 200px !important;


}





/* ========================================================================= */


/* ESTRUCTURA PERFECTA 1260px (Odyssey Ark) */


/* ========================================================================= */


:root {


    --sa-master-width: 1260px;   /* Exactamente la suma de todo */


    --sa-col-left: 216px;


    --sa-col-center: 684px;


    --sa-col-right: 330px;


    --sa-gap: 15px;


}





@media (min-width: 1200px) {


    /* 1. Limitamos de raíz todos los contenedores principales (anula Canvas 1320px) */


    body .container {


        /* Para que el contenido interno quepa exacto en 1260, sumamos 30px del padding nativo de Bootstrap (.px-3), lo que da 1290px total en pantalla. */


        max-width: 1290px !important;


        width: 1290px !important; 


    }





    /* 2. Quitamos el margen negativo de Bootstrap para evitar deslizamientos */


    .sa-core-row {


        margin-left: 0 !important;


        margin-right: 0 !important;


    }





    /* 3. Columnas con Matemática Absoluta */


    .sa-col-left {


        max-width: var(--sa-col-left) !important;


        flex: 0 0 var(--sa-col-left) !important;


        padding: 0 !important;


        margin-right: var(--sa-gap) !important;


        margin-left: 0 !important;


    }





    .sa-col-center {


        max-width: var(--sa-col-center) !important;


        flex: 0 0 var(--sa-col-center) !important;


        padding: 0 !important;


        margin-right: var(--sa-gap) !important;


        margin-left: 0 !important;


    }





    .sa-col-right {


        max-width: var(--sa-col-right) !important;


        flex: 0 0 var(--sa-col-right) !important;


        padding: 0 !important;


        margin: 0 !important;


    }


}



/* ============================================================

   ARTICLE 3-COLUMN LAYOUT (Article + 160px banners + 330px sidebar)

   ============================================================ */

@media (min-width: 1200px) {

    .sa-col-center-wide {

        max-width: 740px !important;

        flex: 0 0 740px !important;

        padding: 0 !important;

        margin-right: var(--sa-gap) !important;

        margin-left: 0 !important;

    }

    .sa-col-banners {

        max-width: 160px !important;

        flex: 0 0 160px !important;

        padding: 0 !important;

        margin-right: var(--sa-gap) !important;

        margin-left: 0 !important;

    }

}

/* ============================================================
   MEGA-MENU CENTERING FIX (local-overrides - LAST CSS loaded)
   ============================================================ */
@media (min-width: 992px) {
    #header nav.primary-menu,
    #header .header-row,
    #header nav.primary-menu > ul.menu-container,
    #header li.menu-item.mega-menu {
        position: static !important;
    }
    #header-wrap {
        position: relative !important;
    }
}

/* ============================================================
   TOPBAR: Fecha con Marca (SOLOAZAR LATAM / WORLD)
   ============================================================ */
.topbar-date-brand {
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #2d3436 !important;
    white-space: nowrap;
    display: flex !important;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
}
.topbar-brand-name {
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.5px;
    color: #1a1a2e !important;
    text-transform: uppercase;
}
.topbar-date-separator {
    font-weight: 300 !important;
    color: #636e72 !important;
    margin: 0 2px;
}
.topbar-date-text {
    font-weight: 400 !important;
    font-size: 13px !important;
    color: #2d3436 !important;
}

/* ============================================================
   LUPA: Fondo amarillo, icono negro
   ============================================================ */
#header #top-search a,
#header #top-search a#top-search-trigger {
    background-color: #f5a623 !important;
    color: #1a1a1a !important;
}
#header #top-search a:hover,
#header #top-search a#top-search-trigger:hover {
    background-color: #e6951a !important;
    color: #000 !important;
}
#header #top-search a i {
    color: #1a1a1a !important;
}
#header #top-search a:hover i {
    color: #000 !important;
}

/* Lupa icono mas grande */
#header #top-search a i,
#header #top-search a#top-search-trigger i {
    font-size: 20px !important;
}