/* --- 1. ESTRUCTURA BASE --- */
.modulo-patrocinado {
    width: 100%;
    /* Cambiamos 'center' por 'top center' para que mande la parte de arriba */
    background-position: top center; 
    /* 'contain' asegura que se vea toda la imagen sin recortes, 
       pero si quieres que cubra el ancho usa 100% auto */
    background-size: 100% auto; 
    background-repeat: no-repeat; /* Evita que la imagen se duplique abajo */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    border-radius: 12px;
}

.patrocinado-wrapper {
    display: flex;
    width: 97%;
    max-width: 1200px;
    align-items: center;
    justify-content: space-between;
}

/* --- 2. BRANDING / LOGO (35%) --- */
.patrocinado-branding {
    width: 35%;
    display: flex;
    justify-content: left;
    align-self: flex-start;
    margin-top: 115px;    /* Espacio arriba */
    margin-left: 50px;   /* <--- Aquí agregas el espacio a la izquierda */
}

.img-brand-patrocinio { 
    max-width: 280px; 
    width: 55%; 
    height: auto; 
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3)); 
}

/* --- 3. CONTENEDOR BLANCO (65%) --- */
.patrocinado-container-blanco {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    width: 65%; 
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
    height: 360px; /* Altura firme */
    position: relative;
    overflow: hidden;
}

/* --- 4. DISEÑO PARA PC (Grid Estático) --- */
@media (min-width: 769px) {
    .patrocinado-main-content {
        display: grid !important;
        grid-template-columns: 2fr 1.1fr; /* Mosaico ancho | Lista texto */
        gap: 20px;
        height: 100%; /* Obliga a los hijos a medir 350px */
        width: 100%;
    }

    /* Mosaico de fotos */
    .mosaico-wrapper-grid {
        display: grid;
        grid-template-areas: "grande m1" "grande m2";
        grid-template-columns: 1.2fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 10px;
        height: 100%;
    }

    .slot-0 { grid-area: grande; }
    .slot-1 { grid-area: m1; }
    .slot-2 { grid-area: m2; }

    /* Columna de texto lateral */
    .lista-textos-col {
        display: flex;
        flex-direction: column;
        border-left: 1px solid #f2f2f2;
        padding-left: 20px;
        height: 100%;
        justify-content: flex-start; /* Noticias arriba */
    }

    .scroll-texto-static {
    display: flex;
    flex-direction: column;
    gap: 6px; /* Un poco más apretado para que quepan más */
    flex-grow: 1;
    overflow: hidden;
    margin-top: 5px;
}
}

/* --- 5. ESTILO DE TARJETAS (FOTOS) --- */
.patrocinado-card {
    display: block;
    position: relative;
    width: 100%;
    height: 100%; /* Llena el grid */
    border-radius: 20px;
    overflow: hidden;
    background: #000;
    text-decoration: none;
}

.patrocinado-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Evita que se encojan o deformen */
    opacity: 0.85;
    transition: 0.4s;
    display: block;
}

.patrocinado-card:hover img {
    transform: scale(1.05);
    opacity: 1;
}

.patrocinado-title {
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Mantiene el límite de 4 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;

    /* LA BANDITA: Fondo oscuro para resaltar letras blancas */
    background-color: rgba(0, 0, 0, 0.7); /* Negro con 70% de opacidad */
    padding: 6px 10px;
    border-radius: 4px; /* Un toque redondeado suave */
    box-shadow: 2px 2px 10px rgba(0,0,0,0.5); /* Sombra para dar profundidad */
}

/* Ajuste opcional para el contenedor del texto si quieres que la banda no flote */
.txt-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 5px;
    /* Un degradado extra de seguridad */
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
}

/* --- 6. ESTILO TEXTOS Y BOTÓN --- */
.lista-titulo {
    font-size: 13px;
    font-weight: 900;
    color: #2b2b2b;
    letter-spacing: 1px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.item-solo-texto {
    font-size: 12px;
    color: #333;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.2;
    display: block;
    padding: 2px 0;
    transition: 0.3s;
}

.item-solo-texto:hover { color: #e02121; }
.item-solo-texto::before { content: "• "; color: #e02121; font-weight: bold; }

.btn-ver-mas-patrocinio {
    display: block;
    background: #db214c;
    color: #fff !important;
    text-align: center;
    padding: 6px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: auto; /* Truco para pegarlo al fondo */
    margin-bottom: 5px;
    transition: 0.3s;
}

.btn-ver-mas-patrocinio:hover { background: #000; }

/* --- 7. DISEÑO MÓVIL (LIMPIO) --- */
@media (max-width: 768px) {
    
    /* FONDO: Se ajusta al ancho y ancla arriba */
    .modulo-patrocinado { 
        margin-top: -25px !important; 
        background-size: 100% auto !important; 
        background-position: top center !important;
        background-repeat: no-repeat !important;
        padding: 110px 0 10px 0 !important; 
    }

    .patrocinado-wrapper {
        flex-direction: column;
        gap: 0 !important; 
        align-items: center;
    }

    /* MANIPULACIÓN DEL LOGO DEL PATROCINADOR */
    .patrocinado-branding { 
        width: 100%; 
        display: flex;
        justify-content: flex-start; 
        margin-left: 20px;           
        margin-top: -5px;           
        margin-bottom: 20px; 
    }

    .img-brand-patrocinio {
        /* AJUSTA AQUÍ EL TAMAÑO DEL LOGO */
        width: 60%;          /* Tamaño relativo al ancho del celular */
        max-width: 150px;    /* Límite máximo para que no se pixele */
        height: auto;
        filter: drop-shadow(0 5px 10px rgba(0,0,0,0.3));
    }

    /* CONTENEDOR BLANCO */
    .patrocinado-container-blanco { 
        width: 95%;                  
        height: auto; 
        border-radius: 20px; 
        margin-top: -10px;           
        padding: 15px;
        box-shadow: 0 5px 25px rgba(0,0,0,0.2);
    }
    
    .patrocinado-main-content, 
    .mosaico-wrapper-grid { 
        display: flex !important; 
        flex-direction: column; 
        height: auto; 
        gap: 12px;
    }

    /* ALTURA DE LAS 2 FOTOS QUE QUEDAN ARRIBA */
    .patrocinado-card { 
        height: 180px; 
    }

    /* SECCIÓN DE NOTICIAS DE TEXTO */
    .lista-titulo {
        font-size: 16px !important; 
        margin-top: 15px;
    }

    .lista-textos-col { 
        border-left: none; 
        border-top: 1px solid #eee; 
        padding: 10px 0 0 0; 
        margin-top: 5px;
    }

    .item-solo-texto {
        font-size: 14px !important; 
        font-weight: 700;
        margin-bottom: 10px;
    }

    .scroll-texto-static { 
        overflow: visible; 
    }

    .btn-ver-mas-patrocinio {
        margin-top: 15px;
        padding: 10px;
    }
}