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



    .name-marquee {
        height: 64px;
        position: relative;
        z-index: 20;
    }

    .name-marquee-content span {
        font-size: 24px;
        font-weight: 700;
    }

    .name-marquee-content .marquee-dot {
        margin: 0 24px;
        font-size: 26px;
    }

    .name-marquee-track {
        animation-duration: 16s;
    }


    .bio-section {
        min-height: 1000px;
        overflow: hidden;
        top: 0;
    }

    .bio-container {
        min-height: 1000px;
    }

    .bio-colombia {
        width: 340px;

        left: 50%;
        top: 40px;

        transform: translateX(-50%);

        opacity: 0.45;

        z-index: 1;
    }

    .bio-title {
        left: 50%;
        top: 55px;

        transform: translateX(-50%);

        font-size: 96px;
        line-height: 1;

        white-space: nowrap;

        z-index: 4;
    }

    .bio-jennifer {
        width: 380px;
        left: 50%;
        top: 100px;

        bottom: auto;

        transform: translateX(-50%);

        z-index: 3;
    }

    .bio-content {
        width: 68%;
        left: 50%;
        right: auto;
        top: 45%;

        transform: translateX(-50%);

        z-index: 5;
    }

    .bio-item p {
        font-size: 21px;
        line-height: 1.15;
    }

    .bio-divider {
        width: 100%;
        height: 3px;

        margin: 20px 0;

        background-image: repeating-linear-gradient(
            to right,
            #3a0a7f 0,
            #3a0a7f 22px,
            transparent 22px,
            transparent 42px
        );
    }

}


/* iPad Mini / iPad Air: el texto quedaba pegado a la foto,
   se baja un poco más que en el resto del rango de tablet. */
@media (min-width: 768px) and (max-width: 834px) {

    .bio-content {
        top: 50%;
    }

}


@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {

    .site-header {
        position: absolute;

        top: 0;
        left: 0;

        width: 100%;
        height: 90px;

        display: flex;
        align-items: center;
        justify-content: flex-end;

        padding: 0 40px;

        z-index: 100;
    }

    .main-nav {
        display: flex;
        align-items: center;

        flex-wrap: nowrap;

        gap: 30px;
    }

    .main-nav a {
        font-size: 16px;
        white-space: nowrap;
    }

    .hero {
        position: relative;

        width: 100%;
        min-height: 100vh;

        overflow: hidden;

        background-size: cover;
        background-position: center;
    }

    .hero-container {
        min-height: 100vh;
    }

    .hero-logo-jennifer {
        position: absolute;

        width: 320px;
        height: auto;

        left: 6%;
        top: 22%;

        z-index: 3;
    }

    .hero-circle {
        position: absolute;

        width: 420px;
        height: 420px;

        border-radius: 50%;

        background-color: #fc310d;

        right: 6%;
        bottom: 6%;

        z-index: 1;
    }

    .hero-photo {
        position: absolute;

        width: 340px;
        height: auto;

        right: 5%;
        bottom: 0;

        z-index: 2;
    }

    .hero-logo-primero {
        position: absolute;

        width: 140px;
        height: auto;

        left: 8%;
        top: 60%;

        z-index: 4;
    }

    .hero-podcast {
        position: absolute;

        width: 380px;
        height: 80px;

        left: 50%;
        bottom: 20px;

        transform: translateX(-50%);

        z-index: 6;

        overflow: hidden;
        border-radius: 12px;
    }

    .hero-podcast iframe {
        width: 100%;
        height: 80px;

        border: none;
        border-radius: 12px;
        display: block;
    }

}


@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {

    .site-header {
        position: absolute;

        top: 0;
        left: 0;

        width: 100%;
        height: auto;

        padding: 35px 30px 0;

        display: flex;
        justify-content: center;
        align-items: flex-start;

        z-index: 100;
    }

    .main-nav {
        width: 100%;

        display: flex;
        justify-content: center;
        align-items: center;

        flex-wrap: wrap;

        column-gap: 40px;
        row-gap: 18px;
    }

    .main-nav a {
        font-size: 20px;
        line-height: 1.2;

        white-space: nowrap;
    }

    .hero {
        position: relative;

        width: 100%;
        min-height: 100vh;

        overflow: hidden;

        background-size: cover;
        background-position: center top;
    }

    .hero-container {
        min-height: 100vh;
    }

    .hero-logo-jennifer {
        position: absolute;

        width: clamp(260px, 42vw, 480px);
        height: auto;

        left: 50%;
        top: 12%;

        transform: translateX(-50%);

        z-index: 4;
    }

    .hero-circle {
        position: absolute;

        width: clamp(380px, 50vh, 620px);
        height: clamp(380px, 50vh, 620px);

        left: 50%;
        bottom: 120px;

        transform: translateX(-50%);

        background-color: #fc310d;

        z-index: 1;
    }

    .hero-photo {
        position: absolute;

        width: auto;
        height: clamp(420px, 55vh, 650px);

        left: 50%;
        bottom: 0;

        transform: translateX(-50%);

        z-index: 2;
    }

    .hero-logo-primero {
        position: absolute;

        width: clamp(120px, 16vw, 170px);
        height: auto;

        left: 50%;
        top: 85%;

        transform: translateX(-50%);

        z-index: 5;
    }

    .hero-podcast {
        position: absolute;

        width: clamp(300px, 55vw, 420px);
        height: 80px;

        left: 50%;
        bottom: 30px;

        transform: translateX(-50%);

        z-index: 6;

        overflow: hidden;
        border-radius: 12px;
    }

    .hero-podcast iframe {
        width: 100%;
        height: 80px;

        border: none;
        border-radius: 12px;
        display: block;
    }

}


@media (min-width: 769px) and (max-width: 1024px) {
 
    .milibro-container {
        gap: 40px;
        padding: 0 40px;
    }
 
    .milibro-libro {
        flex: 0 0 40%;
    }
 
    .milibro-titulo {
        font-size: 50px;
    }
 
    .milibro-firma {
        width: 190px;
    }
 
    .milibro-texto {
        font-size: 16px;
    }
 

    
@media (min-width: 768px) 
       and (max-width: 1199px) 
       and (orientation: portrait) {

    #causas {
        min-height: auto;
    }

    .causas-section {
        width: 100%;
        min-height: auto;

        padding: 90px 40px 100px;

        overflow: hidden;
    }

    .causas-container {
        width: 100%;
        max-width: 850px;

        min-height: auto;

        margin: 0 auto;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: flex-start;

        gap: 0;
    }


    .causas-texto {
        display: contents;
    }
    .causas-titulo-wrap {
        order: 1;

        width: 100%;

        display: flex;
        justify-content: center;
        align-items: center;

        margin-bottom: 45px;
    }

    .causas-titulo {
        font-size: clamp(68px, 10vw, 100px);

        line-height: 0.92;

        text-align: center;

        margin: 0;
    }


    .causas-pajaros,
    .causas-linea {
        display: none !important;
    }

    .causas-recurso {
        order: 2;

        width: 100%;
        max-width: 480px;

        display: flex;
        flex-direction: column;
        align-items: center;

        margin: 0 auto 45px;

        text-align: center;
    }

    .causas-recurso-caja {
        width: 100%;
        height: 380px;

        background-color: #ffffff;

        border: 2px solid #000000;
    }

    .causas-recurso-texto {
        margin: 15px 0 0;

        font-size: 17px;
        line-height: 1.25;

        text-align: center;
    }

    .causas-descripcion {
        order: 3;

        width: 100%;
        max-width: 700px;

        margin: 0 auto 35px;

        font-size: 23px;
        line-height: 1.45;

        text-align: center;
    }

    .causas-boton {
        order: 4;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        margin: 0 auto;

        padding: 13px 42px;

        font-size: 19px;
    }

}}

@media (max-width: 767px) {
 
    .plg-section {
        width: 100%;
        min-height: auto;
 
        padding: 70px 20px 80px;
 
        overflow: hidden;
    }
 
    .plg-container {
        width: 100%;
        max-width: 100%;
 
        min-height: auto;
 
        padding: 0;
 
        display: flex;
        flex-direction: column;
 
        align-items: center;
        justify-content: flex-start;
 
        gap: 0;
    }
 
    .plg-contenido {
        display: contents;
    }
 
    .plg-logo {
        order: 1;
 
        width: 100%;
        max-width: 220px;
 
        margin: 0 auto 30px;
    }
 
    .plg-colombia {
        order: 2;
 
        width: 100%;
        max-width: 310px;
        height: auto;
 
        margin: 0 auto 30px;
    }
 
    .plg-texto {
        order: 3;
 
        width: 100%;
        max-width: 500px;
 
        margin: 0 auto 28px;
 
        font-size: 18px;
        line-height: 1.4;
 
        text-align: center;
    }
 
    .plg-contenido .causas-boton {
        order: 4;
 
        display: inline-flex;
        align-items: center;
        justify-content: center;
 
        margin: 0 auto;
 
        padding: 11px 30px;
        font-size: 16px;
    }
 
}

@media (min-width: 768px) and (max-width: 1199px) {
 
    .medios-section {
        padding: 55px 0 70px;
    }
 
    .medios-titulo {
        font-size: 36px;
    }
 
    .medios-titulo strong {
        font-size: 52px;
    }
 
    .medios-firma {
        width: 140px;
        margin-bottom: 30px;
    }
 
    .medios-galeria {
        gap: 32px 40px;
    }
 
}

@media (min-width: 768px) and (max-width: 1199px) {
 
    .blog-section {
        padding: 55px 0 70px;
    }
 
    .blog-titulo {
        font-size: 52px;
    }
 
    .blog-firma {
        width: 140px;
        margin-bottom: 30px;
    }
 
    .blog-galeria {
        gap: 32px 40px;
    }
 
}

@media (min-width: 769px) and (max-width: 1199px) {
 
    .footer-pg{
        padding: 50px 0 22px;
    }
 
    .footer-pg h5{
        font-size: 1.4rem;
    }
 
    .footer-pg h6{
        font-size: 1rem;
        margin-bottom: 14px;
    }
 
    .footer-pg ul{
        margin-bottom: 10px;
    }
 
    .redes-sociales a{
        width: 44px;
        height: 44px;
        font-size: 1.15rem;
    }
 
    .copyright{
        font-size: .9rem;
    }

    .footer-bottom, .footer-admin-link {
    display: none !important;
    }
 
}