/* ==========================================================
   BANNER ESTATICO  -  Camara FM
   Plantilla EasyDNNnews: newsListDefault
   ----------------------------------------------------------
   Variantes de color (campo [EDNcf:Colordegradado]):
        rojo        amarillo        naranja
   El campo solo tiene que imprimir una de esas tres palabras.
   ========================================================== */
/* ---------- 1. CONTENEDOR DEL LISTADO ---------- */
.banner-estatico {
    width: 100%;
}
/* ---------- 2. BANNER (un articulo) ----------
   El fondo negro con el edificio entra despues por el campo
   personalizado. Cuando lo tengas, imprimilo como estilo en
   linea en este mismo div:
   style="background-image: url([EDNcf:Imagenfondo]);"
   No pisa el degradado porque el degradado va en el ::after. */
.banner-estatico_list {
    position: relative;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    /* estas dos lineas dejan la imagen de fondo en blanco y negro.
       NO afectan la tarjeta ni la foto de la persona, solo el fondo.
       si la queres a color, borra las dos.
       el gris de background-color controla que tan clara queda:
       mas oscuro = fondo mas oscuro. si la ves muy alumbrada
       comparada con la propuesta, bajale a este hex (#4a4a4a, #3a3a3a) */
    background-color: #6b6b6b;
    background-blend-mode: luminosity;
}
/* ---------- 2b. ALTERNATIVA AL BLANCO Y NEGRO ----------
   Si con el blend-mode de arriba no te gusta como queda,
   borra esas dos lineas y descomenta este bloque. Hace lo
   mismo pero te deja regular aparte el gris y el brillo.
.banner-estatico_list::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: grayscale(100%) brightness(0.55);
}
*/
/* ==========================================================
   3. DEGRADADO DE COLOR
   ----------------------------------------------------------
   Es una BANDA de abajo hacia arriba: color pleno abajo y un
   degradado corto al final. No es un resplandor, asi que no
   alumbra el fondo.
   >>> EL ALTO DE LA BANDA SON ESTOS DOS PORCENTAJES <<<
       #D71A21 28%              <- hasta aca el color va PLENO
       rgba(215, 26, 33, 0) 42% <- aca termina de desaparecer
   Osea: la banda ocupa el 28% de abajo a color lleno, y del
   28% al 42% se apaga. Para subirla o bajarla mueve los dos
   juntos, manteniendo unos 12-14 puntos de diferencia:
       mas baja  ->  20% y 32%
       actual    ->  28% y 42%
       mas alta  ->  40% y 55%
   El 0deg del principio es la direccion (de abajo hacia
   arriba). Si la queres un poco mas alta del lado izquierdo,
   como en la propuesta, cambia 0deg por 6deg u 8deg.
   ========================================================== */
.banner-estatico_list::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.banner-estatico_list.rojo::after {
    background: linear-gradient(0deg, #D71A21 0%, #D71A21 7%, rgba(215, 26, 33, 0) 51%);
}
.banner-estatico_list.amarillo::after {
    background: linear-gradient(0deg, #FFB60F 0%, #FFB60F 7%, rgba(240, 176, 0, 0) 42%);
}
.banner-estatico_list.naranja::after {
    background: linear-gradient(0deg, #e86f0c 0%, #e86f0c 7%, rgba(232, 111, 12, 0) 42%);
}
/* ---------- 3b. SI TAMBIEN QUERES EL ROJO DEL BORDE DERECHO ----------
   En la propuesta el borde derecho tiene algo de color. Si lo
   queres, reemplaza la regla de .rojo por esta: son dos
   capas separadas por coma, la banda de abajo y el borde derecho.
.banner-estatico_list.rojo::after {
    background:
        linear-gradient(0deg, #D71A21 0%, #D71A21 28%, rgba(215, 26, 33, 0) 42%),
        linear-gradient(90deg, rgba(215, 26, 33, 0) 75%, rgba(215, 26, 33, 0.7) 100%);
}
*/
/* ---------- 4. FILA: TARJETA + FOTO ---------- */
.banner-estatico_items {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    max-width: 70rem;
    margin: 0px auto 0 12%;
    padding: 3rem 0 1rem 0;
}
/* ---------- 5. TARJETA DE TEXTO ---------- */
.banner-estatico_items--content {
    flex: 1 1 50%;
    background-color: rgb(255 255 255 / 72%);
    /* el orden es: arriba-izq, arriba-der, abajo-der, abajo-izq.
       la curva grande va abajo a la izquierda, como en la propuesta */
    border-radius: 0.75rem 0.75rem 0.75rem 5rem;
    padding: 3.5rem 15rem 3.5rem 3rem;
}
/* si el articulo no trae imagen, la tarjeta ocupa todo el ancho */
.banner-estatico_items--content:only-child {
    flex: 1 1 100%;
    padding-right: 3rem;
}
.banner-estatico_items--content h1 {
    margin: 0 0 1.25rem 0;
    font-family: Montserrat, Arial, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a1a;
}
/* el subtitulo: la palabra en cursiva del titulo.
   Las tres fuentes del proyecto son sans, asi que use Lato en
   cursiva. Si la propuesta grafica pide una serif de verdad,
   cambia solo esta linea. */
.banner-estatico_items--content h1 span {
    font-style: var(--fs-italic);
    font-weight: 400;
    font-family: var(--font-display);
    font-size: 34px;
}
.banner-estatico_items--content p {
    margin: 0 0 0.75rem 0;
    font-family: Inter, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.75;
    color: #3d3d3d;
}
.banner-estatico_items--content p:last-child {
    margin-bottom: 0;
}
.banner-estatico_items--content strong {
    font-weight: 700;
    color: #1a1a1a;
}
/* ---------- 6. FOTO ---------- */
.banner-estatico_items--content-img {
    flex: 0 0 33%;
    /* estas dos lineas montan la foto sobre la tarjeta.
       subi o baja el 4rem para mas o menos traslape,
       o borra las dos lineas si no lo queres */
    position: relative;
    left: -13rem;
    top: -3rem;
    /* ESPACIO SOBRANTE ABAJO:
       top: -2rem sube la foto pero NO le avisa al contenedor,
       asi que el banner sigue reservando esos 2rem y te queda
       el hueco. Este margin negativo se los quita de verdad.
       Si subis el top: -2rem, sube este igual (los dos con el
       mismo numero). Si borras el top, borra este tambien. */
    margin-bottom: -2rem;
}
.banner-estatico_items--content-img img {
    display: block;
    width: 100%;
    height: auto;
}
/* ---------- 7. ACCIONES DE ADMIN ---------- */
.banner-estatico .admin_actions {
    position: relative;
    z-index: 2;
    padding: 0.5rem 1.5rem;
}

/* ==========================================================
   8. RESPONSIVE
   ========================================================== */
@media (max-width: 992px) {
    .banner-estatico_items {
        padding: 3rem 1.25rem;
    }
    .banner-estatico_items--content {
        padding: 2rem 5rem 2rem 2rem;
    }
    .banner-estatico_items--content h1 {
        font-size: 28px;
    }
    .banner-estatico_items--content-img {
        flex: 0 0 32%;
        left: -2.5rem;
    }
}
@media (max-width: 769px) {
  
    .banner-estatico_list {
        background-image: none !important;
        background-color: #ffffffde;
    }
    .banner-estatico_list.rojo::after {
    background: linear-gradient(180deg, rgba(213, 26, 55, 0) 0%, rgba(213, 26, 55, 0.8) 100%) !IMPORTANT;
    }
    .banner-estatico_list.naranja::after {
    background:  linear-gradient(180deg, rgba(232, 111, 12, 0) 0%, rgba(232, 111, 12, 0.8) 100%);
    }
    .banner-estatico_list.amarillo::after {
        background:   linear-gradient(180deg, rgba(240, 176, 0, 0) 0%, rgba(240, 176, 0, 0.8) 100%);

    }
    .banner-estatico_items {
        flex-direction: column;
        align-items: stretch;
        max-width: 24rem;
        padding: 1.5rem 1rem 0rem 1rem;
        border-radius: 1.25rem;
        overflow: hidden;
        margin: 2rem auto 1rem auto;
    }

    /* ------------------------------------------------------
       DEGRADADO DE LA TARJETA EN CELULAR
       ------------------------------------------------------ */
    .banner-estatico_list .banner-estatico_items {
        background-color: rgb(255 255 255 / 19%);
        padding: 0.5rem 1rem 0rem 1rem;
        margin: 2rem auto 1rem auto;
    }
    .banner-estatico_list.amarillo .banner-estatico_items {
        /* background-color: rgb(255 255 255 / 92%); */
    }
    .banner-estatico_list.naranja .banner-estatico_items {
        background-color: rgb(255 255 255 / 43%);
    }

    .banner-estatico_items--content {
        flex: 1 1 auto;
        background-color: transparent;
        border-radius: 0;
        padding: 1.25rem 1rem 0.5rem 1rem;
    }
    .banner-estatico_items--content h1 {
        font-size: 25px;
    }
    /* el subtitulo baja a su propia linea */
    .banner-estatico_items--content h1 span {
        display: block;
        margin: 0;
        font-size: 30px;
    }
    .banner-estatico_items--content p {
        font-size: 13px;
        line-height: 1.7;
    }
    .banner-estatico_items--content-img {
        flex: 1 1 auto;
        position: static;
        left: auto;
        margin-bottom: 0;
    }
}