/* =========================================================
   DIARIO EL ESTRATEGA
   CSS MAESTRO V63 — LO MÁS RECIENTE
   ========================================================= */

:root {
    --de-teal: #155063;
    --de-teal-dark: #083b49;
    --de-blue: #1769C2;
    --de-bg: #F5F7F8;
    --de-text: #17212B;
    --de-muted: #66717A;
    --de-white: #FFFFFF;
    --de-border: #E4E9EC;
}


/* =========================================================
   BASE
   ========================================================= */

html,
body {
    overflow-x: hidden !important;
}

body {
    background: var(--de-bg) !important;
    color: var(--de-text) !important;
}

* {
    box-sizing: border-box;
}


/* =========================================================
   HEADER — BASE LIMPIA
   Referencia: estructura de medio digital moderno.
   No modifica Hero, Historia Flash ni Lo más reciente.
   ========================================================= */

#masthead.site-header {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Identidad del sitio: usamos el logo real del masthead-banner. */
#masthead.site-header .site-branding {
    display: none !important;
}

#masthead.site-header .masthead-banner {
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #fff !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: auto 52px !important;
    border-bottom: 1px solid #e4e9ec !important;
    opacity: 1 !important;
    filter: none !important;
}

#masthead.site-header .masthead-banner::before,
#masthead.site-header .masthead-banner::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    opacity: 0 !important;
}

/* Segunda fila: navegación. */
#masthead.site-header #site-navigation.main-navigation {
    position: relative !important;
    width: 100% !important;
    min-height: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border-bottom: 1px solid #e4e9ec !important;
    box-shadow: none !important;
}

#masthead.site-header #site-navigation.main-navigation::before,
#masthead.site-header #site-navigation.main-navigation::after {
    content: none !important;
    display: none !important;
}

#masthead.site-header #site-navigation.main-navigation #primary-menu {
    background: #fff !important;
}

#masthead.site-header #site-navigation.main-navigation #primary-menu>li>a {
    color: #17212B !important;
    -webkit-text-fill-color: #17212B !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
}

#masthead.site-header #site-navigation.main-navigation #primary-menu>li>a:hover,
#masthead.site-header #site-navigation.main-navigation #primary-menu>li.current-menu-item>a,
#masthead.site-header #site-navigation.main-navigation #primary-menu>li.current_page_item>a {
    color: #155063 !important;
    -webkit-text-fill-color: #155063 !important;
}

/* =========================================================
   HEADER — MOBILE
   ========================================================= */

@media(max-width:767px) {

    #masthead.site-header .masthead-banner {
        position: relative !important;
        height: 82px !important;
        min-height: 82px !important;
        padding: 0 !important;
        background-size: auto 62px !important;
        background-position: 12px center !important;
        border-bottom: 1px solid #e4e9ec !important;
    }

    #masthead.site-header #site-navigation.main-navigation {
        position: relative !important;
        height: 54px !important;
        min-height: 54px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        border-bottom: 1px solid #e4e9ec !important;
        overflow: visible !important;
    }

    /* Oculta el botón duplicado; el nativo de CoverNews mantiene su JS. */
    #masthead.site-header button.de-mobile-menu-button {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Botón nativo funcional de CoverNews. */
    #masthead.site-header #site-navigation.main-navigation .toggle-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: absolute !important;
        top: 4px !important;
        right: 10px !important;
        left: auto !important;
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        background: #155063 !important;
        background-image: none !important;
        border: 0 !important;
        border-radius: 8px !important;
        box-shadow: none !important;
        outline: none !important;
        transform: none !important;
        z-index: 9999 !important;
    }

    #masthead.site-header #site-navigation.main-navigation .toggle-menu::before,
    #masthead.site-header #site-navigation.main-navigation .toggle-menu::after {
        content: none !important;
        display: none !important;
    }

    #masthead.site-header #site-navigation.main-navigation .toggle-menu .ham {
        position: relative !important;
        display: block !important;
        width: 26px !important;
        height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    #masthead.site-header #site-navigation.main-navigation .toggle-menu .ham:not(.exit)::before {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 26px !important;
        height: 3px !important;
        background: #fff !important;
        border-radius: 3px !important;
        box-shadow: 0 7px 0 #fff, 0 14px 0 #fff !important;
    }

    #masthead.site-header #site-navigation.main-navigation .toggle-menu .ham:not(.exit)::after {
        content: none !important;
    }

    #masthead.site-header #site-navigation.main-navigation .toggle-menu .ham.exit::before,
    #masthead.site-header #site-navigation.main-navigation .toggle-menu .ham.exit::after {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        top: 8px !important;
        width: 26px !important;
        height: 3px !important;
        background: #fff !important;
        border-radius: 3px !important;
        box-shadow: none !important;
    }

    #masthead.site-header #site-navigation.main-navigation .toggle-menu .ham.exit::before {
        transform: rotate(45deg) !important;
    }

    #masthead.site-header #site-navigation.main-navigation .toggle-menu .ham.exit::after {
        transform: rotate(-45deg) !important;
    }

    #masthead.site-header #site-navigation.main-navigation #primary-menu {
        background: #155063 !important;
    }

    #masthead.site-header #site-navigation.main-navigation #primary-menu li a,
    #masthead.site-header #site-navigation.main-navigation #primary-menu li a:hover,
    #masthead.site-header #site-navigation.main-navigation #primary-menu li a:focus,
    #masthead.site-header #site-navigation.main-navigation #primary-menu li a:active,
    #masthead.site-header #site-navigation.main-navigation #primary-menu li.current-menu-item>a,
    #masthead.site-header #site-navigation.main-navigation #primary-menu li.current_page_item>a {
        width: 100% !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        background: #155063 !important;
    }
}

/* =========================================================
   HISTORIA FLASH
   ========================================================= */

.home .trending-posts,
.home .af-trending-posts,
.home .news-ticker,
.home .breaking-news {
    max-width: 100% !important;
    overflow: hidden !important;
}


/* =========================================================
   HERO — CONTENEDOR EXTERIOR
   ========================================================= */

.home .hero-principal {
    width: 100% !important;
    max-width: 100% !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
}

.home .hero-principal>li.wp-block-post {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    background: transparent !important;
    border: 0 !important;
}


/* =========================================================
   HERO
   ========================================================= */

.home .hero-principal .hero-noticia-principal {

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--de-teal) !important;

    border-radius: 18px !important;

    overflow: hidden !important;

    box-shadow: 0 8px 25px rgba(0, 0, 0, .08) !important;

    display: block !important;

    position: relative !important;
}


/* =========================================================
   IMPORTANTE:
   EL GRID VA AQUÍ.
   ESTE ES EL ELEMENTO QUE CONTIENE
   IMAGEN + FECHA + TÍTULO.
   ========================================================= */

.home .hero-principal .hero-noticia-principal .wp-block-group__inner-container {

    display: grid !important;

    grid-template-columns: minmax(0, 58%) minmax(0, 42%) !important;

    grid-template-rows: auto 1fr !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    height: 460px !important;

    background: var(--de-teal) !important;

    position: relative !important;

    align-items: stretch !important;
}


/* =========================================================
   IMAGEN
   ========================================================= */

.home .hero-principal .hero-noticia-principal .wp-block-post-featured-image {

    grid-column: 1 !important;
    grid-row: 1 / 3 !important;

    width: 100% !important;
    height: 460px !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    position: relative !important;

    overflow: hidden !important;

    background: var(--de-teal-dark) !important;
}

.home .hero-principal .hero-noticia-principal .wp-block-post-featured-image a {

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    position: relative !important;
}

.home .hero-principal .hero-noticia-principal .wp-block-post-featured-image img {

    display: block !important;

    position: static !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;

    aspect-ratio: auto !important;

    border-radius: 0 !important;
}


/* =========================================================
   FECHA
   ========================================================= */

.home .hero-principal .hero-noticia-principal .wp-block-post-date {

    grid-column: 2 !important;
    grid-row: 1 !important;

    align-self: end !important;

    width: auto !important;

    margin: 0 !important;

    padding: 42px 42px 0 !important;

    color: rgba(255, 255, 255, .72) !important;

    font-size: 12px !important;

    line-height: 1.4 !important;

    font-weight: 700 !important;

    letter-spacing: .08em !important;

    text-transform: uppercase !important;

    background: transparent !important;
}


/* =========================================================
   TÍTULO
   ========================================================= */

.home .hero-principal .hero-noticia-principal .wp-block-post-title {

    grid-column: 2 !important;
    grid-row: 2 !important;

    align-self: start !important;

    width: auto !important;
    max-width: none !important;

    margin: 12px 0 0 !important;

    padding: 0 42px 42px !important;

    color: #fff !important;

    font-size: 36px !important;

    line-height: 1.12 !important;

    font-weight: 800 !important;

    letter-spacing: -.025em !important;

    text-align: left !important;

    position: static !important;

    overflow-wrap: break-word !important;
}

.home .hero-principal .hero-noticia-principal .wp-block-post-title a {

    color: #fff !important;

    -webkit-text-fill-color: #fff !important;

    text-decoration: none !important;

    background: transparent !important;

    position: static !important;
}

.home .hero-principal .hero-noticia-principal .wp-block-post-title a:hover {

    color: #fff !important;

    -webkit-text-fill-color: #fff !important;
}


/* =========================================================
   ANULAR POSICIONAMIENTOS ANTIGUOS
   ========================================================= */

.home .hero-principal .hero-noticia-principal .wp-block-post-featured-image,
.home .hero-principal .hero-noticia-principal .wp-block-post-featured-image a,
.home .hero-principal .hero-noticia-principal .wp-block-post-featured-image img,
.home .hero-principal .hero-noticia-principal .wp-block-post-title,
.home .hero-principal .hero-noticia-principal .wp-block-post-title a {

    float: none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(min-width:768px) and (max-width:1100px) {

    .home .hero-principal .hero-noticia-principal .wp-block-group__inner-container {

        grid-template-columns: 55% 45% !important;

        height: 410px !important;
    }

    .home .hero-principal .hero-noticia-principal .wp-block-post-featured-image {

        height: 410px !important;
    }

    .home .hero-principal .hero-noticia-principal .wp-block-post-date {

        padding: 35px 30px 0 !important;

        font-size: 11px !important;
    }

    .home .hero-principal .hero-noticia-principal .wp-block-post-title {

        padding: 0 30px 35px !important;

        font-size: 30px !important;
    }
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media(max-width:767px) {

    .home .hero-principal {

        margin: 18px 0 0 !important;
    }

    .home .hero-principal .hero-noticia-principal {

        border-radius: 14px !important;

        overflow: hidden !important;
    }


    /* UNA SOLA COLUMNA */

    .home .hero-principal .hero-noticia-principal .wp-block-group__inner-container {

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        background: var(--de-teal) !important;
    }


    /* FOTO */

    .home .hero-principal .hero-noticia-principal .wp-block-post-featured-image {

        order: 1 !important;

        width: 100% !important;
        height: auto !important;

        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        flex: none !important;
    }

    .home .hero-principal .hero-noticia-principal .wp-block-post-featured-image a {

        width: 100% !important;
        height: auto !important;

        display: block !important;
    }

    .home .hero-principal .hero-noticia-principal .wp-block-post-featured-image img {

        width: 100% !important;
        height: auto !important;

        min-width: 100% !important;
        min-height: 0 !important;

        aspect-ratio: 16 / 10 !important;

        object-fit: cover !important;

        display: block !important;
    }


    /* FECHA */

    .home .hero-principal .hero-noticia-principal .wp-block-post-date {

        order: 2 !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 18px 20px 0 !important;

        font-size: 11px !important;

        align-self: auto !important;
    }


    /* TÍTULO */

    .home .hero-principal .hero-noticia-principal .wp-block-post-title {

        order: 3 !important;

        width: 100% !important;

        margin: 8px 0 0 !important;

        padding: 0 20px 24px !important;

        font-size: 25px !important;

        line-height: 1.16 !important;

        color: #fff !important;

        position: static !important;
    }
}



/* =========================================================
   LO MÁS RECIENTE — V65
   REDISEÑO FORZADO DE LAS TARJETAS
   ========================================================= */

/* Fondo general de la zona */
.home .site-content {
    background: #F5F7F8 !important;
}

/* Contenedor de Lo más reciente */
.home .site-content .wp-block-post-template {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Cada noticia: tarjeta visible */
.home .site-content .wp-block-post-template>li.wp-block-post {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 170px !important;
    grid-template-rows: auto auto auto !important;
    align-items: start !important;
    width: 100% !important;
    min-height: 170px !important;
    margin: 0 0 16px 0 !important;
    padding: 20px !important;
    box-sizing: border-box !important;

    background: #fff !important;
    border: 1px solid #e2e8eb !important;
    border-radius: 20px !important;
    box-shadow: 0 6px 20px rgba(23, 33, 43, .08) !important;

    overflow: hidden !important;
}

/* TODOS los hijos directos pasan a ocupar la columna de texto,
   excepto la imagen */
.home .site-content .wp-block-post-template>li.wp-block-post>* {
    grid-column: 1 !important;
}

/* Imagen: columna derecha */
.home .site-content .wp-block-post-template>li.wp-block-post .wp-block-post-featured-image {
    grid-column: 2 !important;
    grid-row: 1 / 4 !important;
    width: 170px !important;
    height: 128px !important;
    min-width: 170px !important;
    min-height: 128px !important;
    margin: 0 0 0 0 !important;
    padding: 0 !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    background: #e9eef0 !important;
}

/* Imagen real */
.home .site-content .wp-block-post-template>li.wp-block-post .wp-block-post-featured-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 15px !important;
}

/* Categoría */
.home .site-content .wp-block-post-template>li.wp-block-post .wp-block-post-terms,
.home .site-content .wp-block-post-template>li.wp-block-post .wp-block-post-terms a {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    margin: 0 18px 7px 0 !important;
    padding: 0 !important;

    color: #1689A8 !important;
    background: transparent !important;
    border: 0 !important;

    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

/* Título */
.home .site-content .wp-block-post-template>li.wp-block-post .wp-block-post-title {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 18px 8px 0 !important;
    padding: 0 !important;

    color: #17212B !important;
    font-size: 21px !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
}

/* Enlace del título */
.home .site-content .wp-block-post-template>li.wp-block-post .wp-block-post-title a {
    color: #17212B !important;
    text-decoration: none !important;
}

/* Extracto */
.home .site-content .wp-block-post-template>li.wp-block-post .wp-block-post-excerpt {
    grid-column: 1 !important;
    grid-row: 3 !important;
    margin: 0 18px 8px 0 !important;
    padding: 0 !important;

    color: #6d7b84 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* Párrafo interno del extracto */
.home .site-content .wp-block-post-template>li.wp-block-post .wp-block-post-excerpt p {
    margin: 0 !important;
    padding: 0 !important;
    color: #6d7b84 !important;
}

/* Fecha: si existe, se muestra abajo del contenido */
.home .site-content .wp-block-post-template>li.wp-block-post .wp-block-post-date {
    grid-column: 1 !important;
    grid-row: 4 !important;
    margin: 0 18px 0 0 !important;
    padding: 0 !important;

    color: #7b8790 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
}

/* Ocultar elementos que WordPress pueda meter entre medias */
.home .site-content .wp-block-post-template>li.wp-block-post .wp-block-read-more {
    display: none !important;
}

/* Título de sección */
.home .site-content .wp-block-group:has(> h2.wp-block-heading)>h2.wp-block-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    margin: 0 0 20px !important;
    padding: 0 0 0 0 !important;

    color: #17212B !important;
    font-size: 30px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
}

/* Ver todas */
.home .site-content .wp-block-group:has(> h2.wp-block-heading)>h2.wp-block-heading::after {
    content: "Ver todas →" !important;
    margin-left: auto !important;
    color: #1689A8 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

/* ---------------------------------------------------------
   MÓVIL
   --------------------------------------------------------- */
@media (max-width:767px) {

    .home .site-content {
        background: #F5F7F8 !important;
    }

    .home .site-content .wp-block-group:has(> h2.wp-block-heading)>h2.wp-block-heading {
        margin: 24px 18px 16px !important;
        padding: 0 !important;
        font-size: 26px !important;
        line-height: 1.15 !important;
    }

    .home .site-content .wp-block-group:has(> h2.wp-block-heading)>h2.wp-block-heading::after {
        font-size: 12px !important;
    }

    .home .site-content .wp-block-post-template {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 18px !important;
        box-sizing: border-box !important;
    }

    .home .site-content .wp-block-post-template>li.wp-block-post {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 96px !important;
        grid-template-rows: auto auto auto auto !important;
        column-gap: 12px !important;

        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 14px !important;
        box-sizing: border-box !important;

        background: #fff !important;
        border: 1px solid #e3e8eb !important;
        border-radius: 16px !important;
        box-shadow: 0 5px 16px rgba(23, 33, 43, .075) !important;
        overflow: hidden !important;
    }

    .home .site-content .wp-block-post-template>li.wp-block-post>* {
        grid-column: 1 !important;
    }

    .home .site-content .wp-block-post-template>li.wp-block-post .wp-block-post-featured-image {
        grid-column: 2 !important;
        grid-row: 1 / 5 !important;

        width: 96px !important;
        height: 82px !important;
        min-width: 96px !important;
        min-height: 82px !important;

        margin: 0 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        background: #e9eef0 !important;
    }

    .home .site-content .wp-block-post-template>li.wp-block-post .wp-block-post-featured-image img {
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
        border-radius: 10px !important;
    }

    .home .site-content .wp-block-post-template>li.wp-block-post .wp-block-post-terms,
    .home .site-content .wp-block-post-template>li.wp-block-post .wp-block-post-terms a {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin: 0 8px 5px 0 !important;
        font-size: 9px !important;
        line-height: 1.15 !important;
        font-weight: 800 !important;
    }

    .home .site-content .wp-block-post-template>li.wp-block-post .wp-block-post-title {
        grid-column: 1 !important;
        grid-row: 2 !important;
        margin: 0 8px 5px 0 !important;
        font-size: 16px !important;
        line-height: 1.2 !important;
        font-weight: 800 !important;
        letter-spacing: -.015em !important;
    }

    .home .site-content .wp-block-post-template>li.wp-block-post .wp-block-post-title a {
        color: #17212B !important;
    }

    .home .site-content .wp-block-post-template>li.wp-block-post .wp-block-post-excerpt {
        grid-column: 1 !important;
        grid-row: 3 !important;
        margin: 0 8px 5px 0 !important;
        font-size: 11.5px !important;
        line-height: 1.35 !important;
    }

    .home .site-content .wp-block-post-template>li.wp-block-post .wp-block-post-excerpt p {
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .home .site-content .wp-block-post-template>li.wp-block-post .wp-block-post-date {
        grid-column: 1 !important;
        grid-row: 4 !important;
        margin: 0 8px 0 0 !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
    }

    .home .site-content .wp-block-post-template>li.wp-block-post .wp-block-read-more {
        display: none !important;
    }
}

/* ---------------------------------------------------------
   PROTECCIÓN CONTRA ESTILOS DEL TEMA
   --------------------------------------------------------- */
.home .site-content .wp-block-post-template>li.wp-block-post::before,
.home .site-content .wp-block-post-template>li.wp-block-post::after {
    content: none !important;
}