/* Fuentes usadas
Google Fonts

PT Serif:
  font-family: "PT Serif", serif;
  font-weight: 400, 700

playfair-display-<uniquifier> {
  font-family: "Lato", serif;
  font-weight: 400, 700

*/


body {
    font-family: "Lato", serif;
    line-height: 1.3 !important;
    font-weight: 400 !important;
    color: #111;
}

h1, h2, h3, h4, h5 {
    font-family: "PT Serif", serif;
    font-weight: 700 !important;
}

    h1 {
        font-size: 220%;
    }
    h2 {
        font-size: 200%;
    }

       
lead, .lead {
    font-size: 120%;
    line-height: 1.3 !important;
    font-weight: 400 !important;
    padding-bottom: .5rem;
}


@media only screen and (max-width: 992px) {

    h1 {
        font-size: 160%;
    }
    h2 {
        font-size: 140%;
    }

 

}


/* <ENCABEZADO> */
#fEncabezado {
    padding: 20px;
}

    #fEncabezado .navbar {
        background-color: #fff;
        z-index: 99;
        padding: .5rem;
        border-radius: .5rem;
    }

#fEncabezado .logo {
    width: 500px;
}

@media (max-width: 1400px) {

    #fEncabezado .logo {
        width: 450px;
    }
}

@media (max-width: 1200px) {

    #fEncabezado {
        padding: 10px;
    }

        #fEncabezado .logo {
            width: 300px;
        }
}

@media only screen and (max-width: 992px) {

    #fEncabezado .navbar {
        padding: .5rem 0rem;
    }

        #fEncabezado .logo {
            width: 260px;
        }

        #fEncabezado .logoIcono {
            width: 100px;
        }

}
/* <ENCABEZADO> */

/* <MENU> */
.navbar {
    --bs-navbar-padding-y: 0rem;
}
.navbar-brand {
    padding-top: 0 !important;
    padding-bottom:  0 !important;
}

.navbar-nav {
    --bs-nav-link-padding-y: .6rem;
    --bs-nav-link-color: #111111;
    --bs-nav-link-hover-color: #4776BA;
    --bs-nav-link-font-weight: 700 !important;
    line-height: 1;
}

    .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
        color: #111;
        font-weight: 700 !important;
    }
    .navbar-nav .nav-link.active {
        color: #BE2979 !important;
        font-weight: 700 !important;
    }


.nav-link:hover {
    color: #BE2979 !important;
    text-decoration: none;
}

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        --bs-nav-link-font-weight: 700;
    }


@media (max-width: 1400px) {

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-left: 1rem;
        padding-right: 1rem;
        --bs-nav-link-font-weight: 700;
    }
  
}

@media only screen and (max-width: 991px) {
    .navbar {
        --bs-navbar-padding-y: 0rem;
    }

    .navbar-nav {
        --bs-nav-link-font-weight: 600;
        --bs-nav-link-color: #111;
        --bs-nav-link-hover-color: 111;
        text-align: center;
    }

        .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
            color: #4776BA;
            --bs-nav-link-font-weight: 700;
        }

        .navbar-nav .nav-link.active {
            border-bottom: none;
        }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-left: 0rem;
        border-bottom: 1px solid #E5E5E5;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .nav-link:hover {
        color: #111;
        text-decoration: underline;
    }

    #fFranjaMenu .offcanvas {
        z-index: 4000;
        background: #fff; 
    }

    .navbar-toggler {
        color: var(--bs-navbar-color);
        background-color: rgba(0,0,0,0);
        border: none;
        border-radius: 0;
    }

    .offcanvas {
        padding-left: 1rem;
        opacity: .9;
    }

}


/* </MENU> */



/* <BANNER> */
#BannerPpal {
    margin-top: -160px;
}
/* </BANNER> */



/* <NOSOTROS> */
#fNosotros {
    padding-top: 3rem;
    padding-bottom: 0rem;
    background: 
        url(/images/th-pajaro-anim.gif) bottom left no-repeat, 
        url(/images/th-lana.png) right center no-repeat,
        url(/images/fondo-flecha-gris.png) bottom center no-repeat;
}
   

#fNosotros .columna1 {
    padding-bottom: 2rem;
    padding-right: 5rem;
}

    #fNosotros .renglon1 {
        padding-bottom: 2rem;
    }

    #fNosotros .renglon2 {
        padding-bottom: 6rem;
    }

@media only screen and (max-width: 992px) {

    #fNosotros {
        padding-top: 1rem;
        padding-bottom: 2rem;
    }
}
/* </NOSOTROS> */



/* <AUTORES> */
#fAutores {
    padding-top: 4rem;
    padding-bottom: 0rem;
    background: 
        url(/images/th-pluma-anim.gif) top right no-repeat;
    background-color: #F6F5F7;
}

    #fAutores .cuadro {
        padding: 1rem 2rem 1rem 2rem;
    }

    #fAutores .cuadro .autor {
        padding-top: .5rem;
    }
    #fAutores .renglon3 {
        padding-top: 2rem;
    }



@media only screen and (max-width: 992px) {
    #fAutores {
        padding-top: 4rem;
        padding-bottom: 4rem;
        background:             
            url(/images/th-pluma-anim.gif) top right no-repeat,
            url(/images/th-huella2.png) bottom left no-repeat;
        background-color: #F6F5F7;
    }
        #fAutores .cuadro {
            padding: 0rem 4rem 1rem 4rem !important;
        }

}
/* </AUTORES> */



/* <FRASE> */
#fFrase {
    color: #fff;
    background: 
        url(/images/th-huella2.png) top left no-repeat,
        url(/images/fondo-frase.png) top repeat-x, 
        url(/images/fondo-flecha-blanca.png) bottom center no-repeat;
    background-color: #001B56;
}

    #fFrase .columna1 {
        padding-top: 6rem;
        padding-bottom: 2rem;
    }

    #fFrase .lead {
        font-family: "PT Serif", serif;
        font-weight: 400 !important;
        font-style: italic;
        line-height: 1.6;
        font-size: 150%;
    }

@media only screen and (max-width: 992px) {

    #fFrase {
        padding-top: 2rem;
        background: url(/images/fondo-flecha-gris2.png) top center no-repeat;
        background-color: #001B56;
    }
        #fFrase .columna1 {
            padding-top: 2rem;
            padding-bottom: 1rem;
        }
        #fFrase .columna2 {
            padding-left: 2rem;
            padding-right: 2rem;
        }

}
/* </FRASE> */



/* <PROCESO> */
#fProceso {
    padding-top: 6rem;
    background-color: #fff;
    background: 
        url(/images/th-gato2-anim.gif) bottom right no-repeat,
        url(/images/th-huella1.png) bottom left no-repeat;
}

    #fProceso .renglon1 {
        padding-bottom: 1rem;
    }

    #fProceso .renglon2 {
        padding-bottom: 6rem;
    }

    #fProceso .cuadro {
        padding: 1rem 1rem 1rem 1rem;
    }

        #fProceso .cuadro .autor {
            padding-top: .5rem;
        }



@media only screen and (max-width: 1200px) {

    #fProceso .renglon2 {
        background: none !important;
    }

}

@media only screen and (max-width: 992px) {

    #fProceso {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
        #fProceso .renglon1 {
            padding-bottom: 0rem;
        }

        #fProceso .renglon2 {
            padding-top: 0rem;
            background: none;
        }
        #fProceso .cuadro {
            padding: 0rem 1rem 1rem 1rem !important;
        }

}
/* </PROCESO> */



/* <PIE> */
#fPie {
    padding-top: 3rem;
    padding-bottom: 4rem;
    background-color: #002169;
}
    #fPie h4 {
    }

    #fPie a {
        color: #fff !important;
        text-decoration: none;
    }

        #fPie a:hover {
            color: #fff !important;
            text-decoration: underline;
        }

    #fPie .iconoCorreo {
        font-size: 125%;
        padding-right: .3rem;
    }

    #fPie .columna {
        padding-bottom: 1rem;
        padding-right: 2rem;
    }

    #fPie h4, #fPie p {
        color: #fff;
    }

    #fPie ul {
        padding-top: 1rem;
    }

    #fPie li, #fPie li a {
        padding-bottom: 1rem;
        color: #fff;
    }

@media only screen and (max-width: 992px) {

    #fPie {
        padding-top: 2rem;
        padding-bottom: 0rem;
    }
        
}
/* </PIE> */



/* <SUBIR> */
#fSubir {
    padding-top: 2rem;
    padding-bottom: 10rem;
    text-align: center;
    background: 
        url(/images/th-planta.png) bottom left no-repeat,
        url(/images/th-comida.png) bottom center no-repeat,
        url(/images/th-caja-anim.gif) bottom right no-repeat;
}


#fSubir .iconoSubir {
    font-size: 220%;
}


@media only screen and (max-width: 992px) {

    #fSubir {
        padding-top: 2rem;
        padding-bottom: 9rem;
        background: 
            url(/images/th-planta.png) bottom left no-repeat, 
            url(/images/th-caja-anim.gif) bottom right no-repeat;
    }
        #fSubir .iconoSubir {
            font-size: 220%;
            padding-top: .5rem;
        }

}
/* </SUBIR> */



/* <BOTONES> */








.btn {
    border-radius: 0rem;
    padding: 1.2rem 2.5rem;
    font-weight: 400 !important;
    color: #fff;
    border-radius: 0;
    border: none;
    transition: 
        border-top-left-radius 0.15s 0.15s ease-out, 
        border-top-right-radius 0.15s 0.30s ease-out, 
        border-bottom-right-radius 0.15s 0.45s ease-out, 
        border-bottom-left-radius 0.15s 0.60s ease-out, 
        box-shadow 0.60s ease-out, 
        transform 0.60s ease-out;
}

    .btn:hover {
        color: #fff;
        border-radius: 1rem;
    }


.btn-primary {
    --bs-btn-color: #FFF;
    --bs-btn-hover-color: #FFF;
    background-color: #1446A0;
    border: none;
    border-radius: 0rem;
}

    .btn-primary:hover {
        --bs-btn-color: #FFF;
        --bs-btn-hover-color: #FFF;
        background-color: #002169;
        border: none;
        border-radius: 1rem;
    }

.btn-secondary {
    --bs-btn-color: #FFF;
    background-color: #BE2979;
    border: none;
    border-radius: 0rem;
}

    .btn-secondary:hover {
        --bs-btn-hover-color: #FFF;
        background-color: #AA256C;
        opacity: .9;
        border: none;
        border-radius: 1rem;
    }


@media only screen and (max-width: 767px) {
    .btn {
        margin-bottom: 30px;
    }
}



/* </BOTONES> */

/* <VARIOS> */
.divisor {
    color: #BE2979;
    font-size: 350%;
    padding-top: 0rem;
    line-height: .5 !important;
}

.divisorChico {
    color: #BE2979;
    font-size: 250%;
    padding-top: 0rem;
    line-height: .5 !important;
}

.text-bg-primary {
    color: #fff !important;
    background-color: ##1446A0 !important;
}

.text-bg-secondary {
    color: #BE2979 !important;
}

.text-bg-success {
    color: #2AD9BB !important;
}

.textoAzul {
    color: #1446A0 !important;
}

.textoFuscia {
    color: #BE2979 !important;
}

.textoVerde {
    color: #2AD9BB !important;
}

.textoAmarillo {
    color: #F1EA25 !important;
}

.textoMorado {
    color: #894B8D !important;
}

.textoBlanco {
    color: #fff !important;
}

.pendiente {
    color: #BE2979;
}


@media only screen and (max-width: 992px) {


}

/* </VARIOS> */


/* <FANCYBOX> */
.fancybox__container {
    --fancybox-bg: rgba(0, 27, 86, 0.95) !important;
}

.f-button {
    background-color: #fff !important;
}




.f-carousel {
    --f-button-width: 38px;
    --f-button-height: 38px;
    --f-button-svg-width: 16px;
    --f-button-svg-height: 16px;
    --f-button-svg-stroke-width: 2.5;
    --f-button-color: rgb(71 85 105);
    --f-button-border-radius: 50%;
    --f-button-shadow: 0 6px 12px -2px rgb(50 50 93 / 25%), 0 3px 7px -3px rgb(0 0 0 / 30%);
    --f-button-bg: #fff;
    --f-button-hover-bg: #f9f9f9;
    --f-button-active-bg: #f0f0f0;
}
.f-carousel__thumbs.is-classic {
    --f-thumb-gap: 8px;
    --f-thumb-opacity: 0.5;
    --f-thumb-hover-opacity: 1;
    --f-thumb-selected-opacity: 1;
}

.f-carousel__thumbs.is-classic {
    --f-thumb-gap: 8px;
    --f-thumb-opacity: 0.5;
    --f-thumb-hover-opacity: 1;
    --f-thumb-selected-opacity: 1;
}

.f-thumbs {
    position: relative;
    flex: 0 0 auto;
    margin: 0;
    overflow: hidden;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    user-select: none;
    perspective: 1000px;
    transform: translateZ(0);
}

.f-carousel__thumbs {
    --f-thumb-width: 40px !important;
    --f-thumb-height: 71px !important;
}

.f-carousel__slide .img-fluid {
    max-width: 30% !important;
}


@media only screen and (max-width: 992px) {

    .f-carousel__slide .img-fluid {
        max-width: 70% !important;
    }

}
/* </FANCYBOX> */


/* <INTERIORES */

/* <INTRO> */
#fIntro {
    padding-top: 3rem;
    padding-bottom: 8rem;
    background: url(/images/th-pajaro-anim.gif) bottom right no-repeat;
}

    #fIntro .renglon1 {
    }

    #fIntro .renglonAutores {
        border-bottom: 3px solid #f9f9f9;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    #fIntro .foto {
        padding: 1rem 2rem 1rem 2rem;
    }

@media only screen and (max-width: 992px) {


}
/* </INTRO> */

/* </INTERIORES */


/* select para filtros */
.selectfiltro{
    min-width: 150px;
}