@media (max-width: 767px) {

    .site-header {
        position: absolute;

        top: 0;
        left: 0;

        width: 100%;
        height: auto;

        padding: 25px 20px 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: 25px;
        row-gap: 15px;
    }

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

        white-space: nowrap;
    }




    .hero {
        position: relative;

        width: 100%;
        min-height: 900px;

        overflow: hidden;

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

    .hero-container {
        min-height: 900px;
    }




    .hero-logo-jennifer {
        position: absolute;

        width: 72%;

        max-width: 430px;

        height: auto;

        left: 50%;
        top: 14%;

        transform: translateX(-50%);

        z-index: 4;
    }




    .hero-circle {
        position: absolute;

        width: 90vw;
        height: 90vw;

        min-width: 400px;
        min-height: 400px;

        max-width: 550px;
        max-height: 550px;

        left: 50%;
        bottom: 90px;

        transform: translateX(-50%);

        background-color: #fc310d;

        z-index: 1;
    }




    .hero-photo {
        position: absolute;

        width: 92%;

        max-width: 560px;

        height: auto;

        left: 50%;
        right: auto;
        bottom: 0;

        transform: translateX(-50%);

        z-index: 2;
    }



    .hero-logo-primero {
        position: absolute;

        width: 145px;

        height: auto;

        left: 50%;
        top: 78%;

        transform: translateX(-50%);

        z-index: 5;
    }

    .hero-podcast {
    width: 88%;
    max-width: 330px;
    height: 73px;

    left: 50%;
    top:85%;
    bottom: 20px;

    transform: translateX(-50%);
}

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



@media (max-width: 767px) {

    .name-marquee {
        height: 58px;
        position: relative;
        z-index: 20;
        top: 0px;
    }

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

    .name-marquee-content .marquee-dot {
        margin: 0 20px;
        font-size: 23px;
    }

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

}

@media (max-width: 768px) {

    .bio-section {
        min-height: 950px;
        overflow: hidden;
        top: 0;
        margin-bottom: 0;
    }

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

    .bio-colombia {
        width: 260px;

        left: 50%;
        top: 35px;

        transform: translateX(-50%);

        opacity: 0.45;

        z-index: 1;
    }

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

        transform: translateX(-50%);

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

        white-space: nowrap;

        z-index: 6;
    }

    .bio-jennifer {
        width: min(87vw, 3600px);
        left: 50%;
        top: 100px;

        bottom: auto;

        transform: translateX(-50%);

        z-index: 4;
    }

    .bio-content {
        width: 82%;
        left: 50%;
        right: auto;
        top: 46%;

        transform: translateX(-50%);

        z-index: 5;
    }

    .bio-item p {
        font-size: 19px;
        line-height: 1.12;
    }

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

        margin: 18px 0;

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

}

@media (max-width: 400px) {

    .bio-colombia {
        width: 210px;
        left: 50%;
        top: 30px;
        transform: translateX(-50%);
        opacity: 0.45;
        z-index: 1;
    }

    .bio-title {
        left: 50%;
        top: 38px;
        transform: translateX(-50%);
        font-size: 56px;
        line-height: 1;
        white-space: nowrap;
        z-index: 3;
    }

    .bio-jennifer {
        width: 300px;
        left: 50%;
        top: 120px;
        bottom: auto;
        transform: translateX(-50%);
        z-index: 4;
    }

    .bio-content {
        width: 88%;
        left: 50%;
        right: auto;
        top: 44%;
        transform: translateX(-50%);
        z-index: 5;
    }

    .bio-item p {
        font-size: 16px;
        line-height: 1.1;
    }
}

@media (max-width: 768px) {

    .milibro-section {
        min-height: auto;
        padding: 0 0 5px;
        margin-top: 0;
        border-top: none;
    }

    .milibro-patron {
        width: 160px;
        height: 160px;
        top: -30px;
        right: -30px;
    }

    .milibro-container {
        flex-direction: column;
        gap: 4px;
        padding: 0 45px;
        align-items: center;
        transform: translateY(-100px);
    }

    .milibro-libro {
        flex: 0 0 auto;
        width: 100%;
        max-width: 220px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }

    .milibro-libro-img {
        width: 125%;
        max-width: none;
        height: auto;
        display: block;
    }

    /* TEXTO */
    .milibro-contenido {
        width: 100%;
        flex: none;
        margin-top: -16px;
        text-align: center;
    }

    .milibro-titulo {
        font-size: 38px;
        line-height: 1;
        text-align: center;
        margin: 0 0 10px;
        margin-bottom: 6px; 
    }

    .milibro-firma {
        width: 160px;
        margin: 0 auto 10px;
    }

    .milibro-texto {
        font-size: 16px;
        line-height: 1.75;
        width: calc(100% + 40px); 
        max-width: calc(100% + 40px);
        text-align: center;
        margin-left: -20px;
        margin-right: -20px;
        margin-bottom: 10px;
    }
}

@media (max-width: 767px) {

    #causas {
        min-height: auto;
    }

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

        padding: 70px 20px 80px;

        overflow: hidden;
    }

    .causas-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;
    }


    .causas-texto {
        display: contents;
    }

    .causas-titulo-wrap {
        order: 1;

        width: 100%;

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

        margin-bottom: 30px;
    }

    .causas-titulo {
        font-size: clamp(38px, 12vw, 62px);

        line-height: 0.92;

        text-align: center;

        margin: 0;
    }


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



    .causas-recurso {
        order: 2;

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

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

        margin: 0 auto 30px;

        text-align: center;
    }

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

        background-color: #ffffff;

        border: 2px solid #000000;
    }

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

        font-size: 14px;
        line-height: 1.2;

        text-align: center;
    }


    .causas-descripcion {
        order: 3;

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

        margin: 0 auto 28px;

        font-size: 18px;
        line-height: 1.4;

        text-align: center;
    }


    .causas-boton {
        order: 4;

        display: inline-flex;

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

        margin: 0 auto;

        padding: 11px 30px;

        font-size: 16px;
    }

}

@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 (max-width: 767px) {
 
    .medios-section {
        padding: 45px 0 55px;
    }
 
    .medios-titulo {
        font-size: 28px;
    }
 
    .medios-titulo strong {
        font-size: 40px;
    }
 
    .medios-firma {
        width: 110px;
        margin-bottom: 24px;
    }
 
    /* En móvil se apila a 1 columna y se quita la línea decorativa,
       ya que solo tiene sentido separando 2 columnas */
    .medios-linea-decorativa {
        display: none;
    }
 
    .medios-galeria {
        grid-template-columns: 1fr;
        gap: 22px;
    }
 
    .medios-item {
        aspect-ratio: 16 / 9;
    }
 
}

@media (max-width: 767px) {
 
    .blog-section {
        padding: 45px 0 55px;
    }
 
    .blog-titulo {
        font-size: 40px;
    }
 
    .blog-firma {
        width: 110px;
        margin-bottom: 24px;
    }
 
    .blog-galeria {
        grid-template-columns: 1fr;
        gap: 22px;
    }
 
}

@media (max-width: 768px){
 
    .footer-pg{
        padding: 45px 0 20px;
        text-align: center;
    }
 
    .footer-pg h5{
        font-size: 1.3rem;
    }
 
    .footer-pg h6{
        margin-top: 10px;
        text-align: center;
    }
 
    .footer-pg ul{
        margin-bottom: 20px;      
        text-align: center;
    }
 
    .redes-sociales{
        justify-content: center;
        margin-top: 15px;
    }
 
    .redes-sociales a{
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
    }
 
    .copyright{
        font-size: .85rem;
        line-height: 1.6;
    }

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