/***************************************************************
Home — estilos propios de la página de inicio (Figma "Home", node 2001:2).
No se tocan aquí clases usadas por Opinión/Reportaje/Matices/Búsqueda:
las reglas de tarjetas van sujetas a .home_noticias_list para no
afectar esas páginas, que reutilizan las mismas clases .home_contenido_box_item*.
****************************************************************/

/* =========================================================
   Hero (.noticia_principal_box) — Figma node 2001:4
   ========================================================= */

.noticia_principal_box{
    position: relative;
    overflow: hidden;
}

.noticia_principal_box_img{
    width: 100%;
    aspect-ratio: 1082 / 701; /* proporción de Figma (Hero, node 2001:4), escala en cualquier ancho */
    object-fit: cover;
    display: block;
    border: none;
}

.noticia_principal_box_overlay{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 65%, rgba(0,0,0,0.85) 100%);
}

.noticia_principal_box_titulo{
    font-family: AktivGroteskCdTrial-XBold;
    font-size: 1.9rem;
    line-height: 1.05;
    color: white;
    text-align: left;
    width: 100%;
    padding: 0;
}

/* En mobile la Hero solo muestra título + botón (Figma node 2001:2709); el lead se muestra recién en desktop */
.noticia_principal_box_parrafo_principal{
    display: none;
}

.noticia_principal_box_link{
    display: inline-block;
    background-color: #fe0100;
    color: white;
    font-family: AktivGroteskTrial-Medium;
    text-transform: uppercase;
    text-decoration: none;
    padding: 8px 18px;
    margin-top: 12px;
    margin-left: 0;
    text-align: center;
    font-size: 0.75rem;
}

/* Figma no incluye este texto extendido en la Hero (ni en desktop ni en mobile): se elimina de la maquetación */
.noticia_principal_box_parrafo,
.noticia_principal_box_parrafo_2{
    display: none !important;
}

/* =========================================================
   Tarjetas de noticia (Hero de la lista "Contenido")
   Figma node 2001:17 (Noticia 1) — mismo patrón para 2/3/4
   Alcance: .home_noticias_list, no afecta otras páginas
   ========================================================= */

.home_noticias_list .home_contenido_box_item{
    display: flex;
    align-items: stretch;
    padding-top: 16px;
    padding-bottom: 16px;
}

/* Figma usa una línea gris clara (#dfdfdf), no negra, entre tarjetas */
.home_noticias_list .home_contenido_box_item_line{
    background-color: #dfdfdf;
}

.home_noticias_list .home_contenido_box_item_left_tipo{
    font-family: AktivGroteskTrial-Medium;
}

.home_noticias_list .home_contenido_box_item_left{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border-left: 5px solid #ab1587;
    padding-left: 12px;
}

.home_noticias_list .home_contenido_box_item--opinion .home_contenido_box_item_left{
    border-left-color: #ebb937;
}

.home_noticias_list .home_contenido_box_item--matices .home_contenido_box_item_left{
    border-left-color: #007fff;
}

.home_noticias_list .home_contenido_box_item--reportaje .home_contenido_box_item_left{
    border-left-color: #ab1587;
}

.home_noticias_list .home_contenido_box_item_left_titulo{
    font-family: AktivGroteskCdTrial-XBold;
    letter-spacing: -0.5px;
}

/* La fila es flex con align-items:stretch para que el borde de color de la
   izquierda siempre llegue hasta abajo del texto; sin esto, la imagen de la
   derecha también se estiraría con el texto en vez de mantener su propia
   proporción (960/640 móvil, 960/597 desktop, definida en main.css). */
.home_noticias_list .home_contenido_box_item_right{
    align-self: flex-start;
}

/* .home_noticias_list .home_contenido_box_item_right img,
.home_noticias_list .home_contenido_box_item_right video{
    border-radius: 6px;
} */

.home_noticias_list .home_contenido_box_item_left_link{
    margin-top: auto;
    padding-top: 10px;
}

.home_noticias_list .home_contenido_box_item_left_link a{
    display: inline-block;
    border: 1.5px solid #fe0100;
    color: #fe0100;
    text-transform: uppercase;
    font-family: AktivGroteskTrial-Medium;
    padding: 6px 14px;
    font-size: 0.65rem;
}

/* =========================================================
   Caja Edición / Suscripción — Figma node 2001:125 (2001:2826 mobile)
   Alcance: .home_suscripcion_promo, no afecta otras páginas
   (.suscripcion_box_table* se reutiliza en Reportaje, Opinión, Matices,
   Suscripción, Login, 404, etc.)
   ========================================================= */

/* En mobile la imagen (50%) deja muy poco ancho para el texto y el botón "SUSCRIBIRME AHORA"
   termina envolviendo en 2 líneas. Figma usa ~36%/64% (node 2001:2826); solo se aplica en mobile
   para no alterar el desktop ya validado (ver override a 50%/50% en el bloque 1024px). */
.home_suscripcion_promo .suscripcion_box_table_left{
    width: 38%;
}

.home_suscripcion_promo .suscripcion_box_table_right{
    width: 62%;
}

/* Texto largo recortado con puntos suspensivos, solo en mobile y solo si el párrafo es largo
   (line-clamp no hace nada si el texto ya entra en las líneas disponibles) */
.home_suscripcion_promo .suscripcion_box_table_right_b2{
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* .suscripcion_box_table_right_b1/_b2 traen de main.css un ancho <100% + margin:auto que las centra
   (con porcentajes distintos entre sí), lo que las desalinea del botón. Se resetea acá para que
   título, párrafo y botón compartan el mismo borde izquierdo (padding-left de la celda). */
.home_suscripcion_promo .suscripcion_box_table_right{
    padding-left: 16px;
    padding-right: 16px;
}

.home_suscripcion_promo .suscripcion_box_table_right_b1{
    width: auto;
    margin: 0;
    font-family: AktivGroteskTrial-Bold;
    color: white;
    font-size: 0.95rem;
}

.home_suscripcion_promo .suscripcion_box_table_right_b2{
    width: auto;
    margin: 0;
    font-family: AktivGroteskTrial-Regular;
    color: white;
    font-size: 0.65rem;
}

/* El botón ahora vive dentro de la misma celda que el párrafo (no en una fila aparte),
   para que quede justo debajo de él y no empujado al fondo de la caja (Figma node 2001:132) */
.home_suscripcion_promo .suscripcion_box_table_right_b3{
    text-align: left;
    vertical-align: top;
    margin-top: 10px;
    padding-top: 0;
    padding-bottom: 0;
}

.home_suscripcion_promo .suscripcion_box_table_right_b3 div{
    display: inline-block;
    width: auto;
    margin: 0;
    background-color: #fe0100;
    border: none;
    padding: 8px 14px;
    white-space: nowrap;
}

.home_suscripcion_promo .suscripcion_box_table_right_b3 div a,
.home_suscripcion_promo .suscripcion_box_table_right_b3 a{
    color: white;
    font-size: 0.7rem;
    font-family: AktivGroteskTrial-Medium;
    text-transform: uppercase;
}

/* =========================================================
   Miscelánea (Humor / Tribunal / Pendegrama)
   Figma node 2001:62 (vertical) y 2001:290 (horizontal)
   Clases nuevas (home_misc_*), sin colisión con /miscelanea
   ========================================================= */

.home_misc{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.home_misc > div{
    box-sizing: border-box;
    padding: 20px;
}

.home_misc--vertical{
    grid-template-areas:
        "humor tribunal"
        "humor pendegrama";
}

.home_misc--horizontal{
    grid-template-areas:
        "humor humor"
        "tribunal pendegrama";
}

.home_misc_humor{
    grid-area: humor;
    background-color: #adf3fd;
}

.home_misc_humor_titulo{
    font-family: AktivGroteskCdTrial-XBold;
    text-transform: uppercase;
    color: #007fff;
    font-size: 1.1rem;
    margin-bottom: 12px;
}

.home_misc_humor_img{
    width: 100%;
    display: block;
    object-fit: cover;
}

/* Mobile (Figma node 2001:2651): la ilustración va pequeña, abajo a la derecha, superpuesta;
   el texto ocupa el ancho principal. En desktop (ver override 1024px) se mantiene el layout actual.
   min-height evita que, en anchos "mobile" grandes (ej. 768px), la imagen (limitada con clamp)
   quede más alta que la tarjeta (cuya altura depende del texto) y se salga por arriba. */
.home_misc_tribunal{
    grid-area: tribunal;
    background-color: #e4bd5e;
    position: relative;
    min-height: 170px;
}

.home_misc_tribunal_texto{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: clamp(60px, 38%, 120px);
}

.home_misc_tribunal_ilustracion{
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: clamp(50px, 18vw, 90px);
    height: auto;
    display: block;
}

.home_misc_tribunal_titulo{
    font-family: AktivGroteskCdTrial-XBold;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    color: black;
    font-size: 1.05rem;
    line-height: 1.05;
}

.home_misc_tribunal_autor{
    font-family: AktivGroteskTrial-Light;
    text-transform: uppercase;
    color: black;
    font-size: 0.65rem;
}

/* Figma no muestra esta cita en mobile (node 2001:2651), solo en desktop (node 2001:66) */
.home_misc_tribunal_cita{
    display: none;
}

.home_misc_tribunal_link{
    display: inline-block;
    align-self: flex-start;
    background-color: white;
    color: black;
    text-decoration: none;
    text-transform: uppercase;
    font-family: AktivGroteskTrial-Medium;
    font-size: 0.65rem;
    padding: 7px 16px;
}

.home_misc_pendegrama{
    grid-area: pendegrama;
    background-color: #ffbee5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.home_misc_pendegrama_titulo{
    font-family: AktivGroteskCdTrial-XBold;
    text-transform: uppercase;
    color: black;
    font-size: 0.95rem;
    line-height: 1.1;
}

.home_misc_pendegrama_icono{
    flex-shrink: 0;
}

.home_misc_pendegrama_icono img{
    /* El SVG trae width/height="100%" internos (preserveAspectRatio="none"); sin una altura
       explícita coherente con su proporción real (~1.09:1) se estira y se ve distorsionado. */
    width: 32px;
    height: 29px;
    display: block;
}

@media only screen and (min-width: 1024px) {

    /* main.css oculta .suscripcion_box_desktop de forma incondicional (display:none !important).
       home/index.blade.php ya trae un <style> inline propio que la revierte; esta regla hace lo
       mismo de forma permanente para cualquier otra vista que reutilice .home_suscripcion_promo
       (ej. _admin/edicion/vistaPrevia.blade.php), sin depender de duplicar el <style> inline. */
    .home_suscripcion_promo .suscripcion_box_desktop{
        /* "initial" no es "block": el valor inicial de display es inline, y una caja
           inline cuyo único contenido es un <table> (block) colapsa a tamaño 0 y no
           pinta box-shadow/bordes propios. */
        display: block !important;
    }

    .home_misc > div{
        padding: 50px;
    }

    .home_misc_humor_titulo{
        font-size: 1.9rem;
    }

    /* Desktop (Figma node 2001:66): la imagen va a la izquierda, junto al texto (fila), no arriba.
       align-items:flex-start para que la imagen quede a la misma altura que el título del Tribunal
       (el padding de la caja ya la separa del título de "Humor a toda página"). */
    .home_misc > .home_misc_tribunal{
        padding-top: 90px;
    }

    .home_misc_tribunal{
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 24px;
    }

    .home_misc_tribunal_texto{
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-right: 0;
    }

    /* clamp() en vez de % puro: crece con la pantalla (vw) sin depender del ancho del contenedor flex */
    .home_misc_tribunal_ilustracion{
        position: static;
        right: auto;
        bottom: auto;
        flex-shrink: 0;
        width: clamp(140px, 12vw, 260px);
    }

    .home_misc_tribunal_titulo{
        font-size: 1.9rem;
    }

    .home_misc_tribunal_autor{
        font-size: 0.85rem;
    }

    .home_misc_tribunal_cita{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 1.1rem;
    }

    .home_misc_tribunal_link{
        font-size: 0.9rem;
        padding: 10px 22px;
        margin-top: 10px;
    }

    .home_misc_pendegrama_titulo{
        font-size: 1.9rem;
    }

    /* clamp() en vez de %: el ancla (.home_misc_pendegrama_icono) no tiene ancho propio definido,
       así que un % ahí se resolvía contra un contenedor ambiguo y salía más chico de lo esperado. */
    .home_misc_pendegrama_icono img{
        width: clamp(70px, 7vw, 120px);
        height: auto;
        aspect-ratio: 90.3744 / 82.7728;
    }

    .noticia_principal_box_overlay{
        padding: 48px 60px;
    }

    .noticia_principal_box_titulo{
        font-size: 3.7rem;
    }

    .noticia_principal_box_parrafo_principal{
        display: block;
        font-family: AktivGroteskTrial-Regular;
        font-size: 1.2rem;
        color: white;
        text-align: left;
        padding: 0;
        max-width: 640px;
        margin-top: 16px;
    }

    .noticia_principal_box_link{
        font-size: 1rem;
        padding: 12px 28px;
        margin-top: 20px;
    }

    .home_noticias_list .home_contenido_box_item{
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .home_noticias_list .home_contenido_box_item_left{
        border-left-width: 8px;
        padding-left: 20px;
    }

    /* Figma (Aktiv Grotesk Regular) — la regla de main.css usa Bold */
    .home_noticias_list .home_contenido_box_item_left_subtitulo{
        font-family: AktivGroteskTrial-Regular;
    }

    .home_noticias_list .home_contenido_box_item_left_titulo{
        letter-spacing: -0.8px;
    }

    .home_noticias_list .home_contenido_box_item_left_link a{
        font-size: 0.8rem;
        padding: 10px 24px;
    }

    /* Desktop ya validado con 50/50: se revierte el ajuste de ancho que solo era para mobile */
    .home_suscripcion_promo .suscripcion_box_table_left{
        width: 50%;
    }

    .home_suscripcion_promo .suscripcion_box_table_right{
        width: 50%;
        padding-left: 30px;
        padding-right: 30px;
    }

    .home_suscripcion_promo .suscripcion_box_table_right_b1{
        font-size: 1.15rem;
    }

    .home_suscripcion_promo .suscripcion_box_table_right_b2{
        -webkit-line-clamp: unset;
        line-clamp: unset;
        overflow: visible;
        font-size: 1rem;
    }

    .home_suscripcion_promo .suscripcion_box_table_right_b3{
        margin-top: 20px;
    }

    .home_suscripcion_promo .suscripcion_box_table_right_b3 div{
        padding: 12px 28px;
    }

    .home_suscripcion_promo .suscripcion_box_table_right_b3 div a,
    .home_suscripcion_promo .suscripcion_box_table_right_b3 a{
        font-size: 1rem;
    }
}

@media only screen and (min-width: 1536px){
    .home_misc_tribunal_ilustracion{
        width: clamp(140px, 11vw, 260px);
    }

    .home_misc > .home_misc_tribunal{
        padding-top: 100px;
    }
}

@media only screen and (min-width: 1728px){
    .home_misc_tribunal_ilustracion{
        width: clamp(140px, 11vw, 260px);
    }

    .home_misc > .home_misc_tribunal{
        padding-top: 110px;
    }
}

@media only screen and (min-width: 1920px){
    .home_misc_tribunal_ilustracion{
        width: clamp(140px, 11vw, 260px);
    }

    .home_misc > .home_misc_tribunal{
        padding-top: 130px;
    }
}