/*
 * Sistema de utilidades de layout (posición / alineación / flex / anchos).
 * 5 niveles de breakpoint, mobile-first: base(0) / s(640) / m(1024) / l(1280) / xl(1680).
 * Compartido por intranet y pública. Portado y recortado de estructura.css (legado cvweb, 9 niveles).
 */

.flex{
    display: flex;
}

.none{
    display: none;
}

/*Contenedores*/

/* flex-direction:column (no la fila por defecto): así el ancho pasa a ser el
   eje cruzado y su hijo directo (el renderer del módulo, o .centrado si está
   centrado) se estira al 100% solo, con el stretch por defecto de flexbox —
   igual que haría un <div> de bloque normal, sin tener que declararlo en cada
   renderer. El alto sigue siendo el eje principal, así que un height:100% en
   el hijo (como usa el slider) se sigue resolviendo bien contra .franja. */
.franja{
    display: flex;
    flex-direction: column;
}

.contenido{
    padding: 25px 0;
}

.centrado{
    width: 96%;
    height: 100%;
    margin: 0 auto;
}

/* ==== base (mobile-first) ==== */

    /*Clases Posicionamiento Elementos*/

    .base-rel{
        position: relative;
    }

    .base-abs{
        position: absolute;
    }

    .base-fix{
        position: fixed;
    }

    /*Fin Clases Posicionamiento Elementos*/

    /*Clases Alineación Textos*/

    .base-center{
        text-align: center;
        text-align-last: center;
    }

    .base-justify{
        text-align: justify;
    }

    .base-right{
        text-align: right;
    }

    .base-left{
        text-align: left;
    }

    /*Fin Clases Alineación Textos*/

    /*Clases Disposición Elementos*/

    .base-row{
        flex-flow: row wrap;
    }

    .base-column{
        flex-direction: column;
    }

    .base-rr{
        flex-direction: row-reverse;
    }

    .base-cr{
        flex-direction: column-reverse;
    }

    .base-jcc{
        justify-content: center;
    }

    .base-jcsb{
        justify-content: space-between;
    }

    .base-jcsa{
        justify-content: space-around;
    }

    .base-jcfs{
        justify-content: flex-start;
    }

    .base-jcfe{
        justify-content: flex-end;
    }

    .base-aic{
        align-items: center;
    }

    .base-aifs{
        align-items: flex-start;
    }

    .base-aife{
        align-items: flex-end;
    }

    .base-aibl{
        align-items: baseline;
    }

    .base-ais{
        align-items: stretch;
    }

    /*Fin Clases Disposición Elementos*/

    /*Clases Ancho Elementos*/

    .base-100{
        width: 100%;
    }

    .base-98{
        width: 98%;
    }

    .base-95{
        width: 95%;
    }

    .base-90{
        width: 90%;
    }

    .base-85{
        width: 85%;
    }

    .base-80{
        width: 80%;
    }

    .base-75{
        width: 75%;
    }

    .base-72{
        width: 72%;
    }

    .base-70{
        width: 70%;
    }

    .base-67{
        width: 67%;
    }

    .base-66{
        width: 66%;
    }

    .base-65{
        width: 65%;
    }

    .base-60{
        width: 60%;
    }

    .base-55{
        width: 55%;
    }

    .base-50{
        width: 50%;
    }

    .base-47{
        width: 47.5%;
    }

    .base-45{
        width: 45%;
    }

    .base-40{
        width: 40%;
    }

    .base-35{
        width: 35%;
    }

    .base-33{
        width: 33%;
    }

    .base-30{
        width: 30%;
    }

    .base-25{
        width: 25%;
    }

    .base-24{
        width: 24%;
    }

    .base-23{
        width: 23%;
    }

    .base-22{
        width: 22.5%;
    }

    .base-20{
        width: 20%;
    }

    .base-15{
        width: 15%;
    }

    .base-10{
        width: 10%;
    }

    .base-5{
        width: 5%;
    }

    /*Fin Clases Ancho Elementos*/

/* ==== s (min-width: 640px) ==== */

@media only screen and (min-width: 640px){

    .centrado{
        width: 92%;
    }

        /*Clases Posicionamiento Elementos*/

        .s-rel{
            position: relative;
        }

        .s-abs{
            position: absolute;
        }

        .s-fix{
            position: fixed;
        }

        /*Fin Clases Posicionamiento Elementos*/

        /*Clases Alineación Textos*/

        .s-center{
            text-align: center;
            text-align-last: center;
        }

        .s-justify{
            text-align: justify;
        }

        .s-right{
            text-align: right;
        }

        .s-left{
            text-align: left;
        }

        /*Fin Clases Alineación Textos*/

        /*Clases Disposición Elementos*/

        .s-row{
            flex-flow: row wrap;
        }

        .s-column{
            flex-direction: column;
        }

        .s-rr{
            flex-direction: row-reverse;
        }

        .s-cr{
            flex-direction: column-reverse;
        }

        .s-jcc{
            justify-content: center;
        }

        .s-jcsb{
            justify-content: space-between;
        }

        .s-jcsa{
            justify-content: space-around;
        }

        .s-jcfs{
            justify-content: flex-start;
        }

        .s-jcfe{
            justify-content: flex-end;
        }

        .s-aic{
            align-items: center;
        }

        .s-aifs{
            align-items: flex-start;
        }

        .s-aife{
            align-items: flex-end;
        }

        .s-aibl{
            align-items: baseline;
        }

        .s-ais{
            align-items: stretch;
        }

        /*Fin Clases Disposición Elementos*/

        /*Clases Ancho Elementos*/

        .s-100{
            width: 100%;
        }

        .s-98{
            width: 98%;
        }

        .s-95{
            width: 95%;
        }

        .s-90{
            width: 90%;
        }

        .s-85{
            width: 85%;
        }

        .s-80{
            width: 80%;
        }

        .s-75{
            width: 75%;
        }

        .s-72{
            width: 72%;
        }

        .s-70{
            width: 70%;
        }

        .s-67{
            width: 67%;
        }

        .s-66{
            width: 66%;
        }

        .s-65{
            width: 65%;
        }

        .s-60{
            width: 60%;
        }

        .s-55{
            width: 55%;
        }

        .s-50{
            width: 50%;
        }

        .s-47{
            width: 47.5%;
        }

        .s-45{
            width: 45%;
        }

        .s-40{
            width: 40%;
        }

        .s-35{
            width: 35%;
        }

        .s-33{
            width: 33%;
        }

        .s-30{
            width: 30%;
        }

        .s-25{
            width: 25%;
        }

        .s-24{
            width: 24%;
        }

        .s-23{
            width: 23%;
        }

        .s-22{
            width: 22.5%;
        }

        .s-20{
            width: 20%;
        }

        .s-15{
            width: 15%;
        }

        .s-10{
            width: 10%;
        }

        .s-5{
            width: 5%;
        }

        /*Fin Clases Ancho Elementos*/
}

/* ==== m (min-width: 1024px) ==== */

@media only screen and (min-width: 1024px){

    .centrado{
        width: 88%;
    }

        /*Clases Posicionamiento Elementos*/

        .m-rel{
            position: relative;
        }

        .m-abs{
            position: absolute;
        }

        .m-fix{
            position: fixed;
        }

        /*Fin Clases Posicionamiento Elementos*/

        /*Clases Alineación Textos*/

        .m-center{
            text-align: center;
            text-align-last: center;
        }

        .m-justify{
            text-align: justify;
        }

        .m-right{
            text-align: right;
        }

        .m-left{
            text-align: left;
        }

        /*Fin Clases Alineación Textos*/

        /*Clases Disposición Elementos*/

        .m-row{
            flex-flow: row wrap;
        }

        .m-column{
            flex-direction: column;
        }

        .m-rr{
            flex-direction: row-reverse;
        }

        .m-cr{
            flex-direction: column-reverse;
        }

        .m-jcc{
            justify-content: center;
        }

        .m-jcsb{
            justify-content: space-between;
        }

        .m-jcsa{
            justify-content: space-around;
        }

        .m-jcfs{
            justify-content: flex-start;
        }

        .m-jcfe{
            justify-content: flex-end;
        }

        .m-aic{
            align-items: center;
        }

        .m-aifs{
            align-items: flex-start;
        }

        .m-aife{
            align-items: flex-end;
        }

        .m-aibl{
            align-items: baseline;
        }

        .m-ais{
            align-items: stretch;
        }

        /*Fin Clases Disposición Elementos*/

        /*Clases Ancho Elementos*/

        .m-100{
            width: 100%;
        }

        .m-98{
            width: 98%;
        }

        .m-95{
            width: 95%;
        }

        .m-90{
            width: 90%;
        }

        .m-85{
            width: 85%;
        }

        .m-80{
            width: 80%;
        }

        .m-75{
            width: 75%;
        }

        .m-72{
            width: 72%;
        }

        .m-70{
            width: 70%;
        }

        .m-67{
            width: 67%;
        }

        .m-66{
            width: 66%;
        }

        .m-65{
            width: 65%;
        }

        .m-60{
            width: 60%;
        }

        .m-55{
            width: 55%;
        }

        .m-50{
            width: 50%;
        }

        .m-47{
            width: 47.5%;
        }

        .m-45{
            width: 45%;
        }

        .m-40{
            width: 40%;
        }

        .m-35{
            width: 35%;
        }

        .m-33{
            width: 33%;
        }

        .m-30{
            width: 30%;
        }

        .m-25{
            width: 25%;
        }

        .m-24{
            width: 24%;
        }

        .m-23{
            width: 23%;
        }

        .m-22{
            width: 22.5%;
        }

        .m-20{
            width: 20%;
        }

        .m-15{
            width: 15%;
        }

        .m-10{
            width: 10%;
        }

        .m-5{
            width: 5%;
        }

        /*Fin Clases Ancho Elementos*/
}

/* ==== l (min-width: 1280px) ==== */

@media only screen and (min-width: 1280px){

    .centrado{
        width: 100%;
        max-width: 1200px;
    }

        /*Clases Posicionamiento Elementos*/

        .l-rel{
            position: relative;
        }

        .l-abs{
            position: absolute;
        }

        .l-fix{
            position: fixed;
        }

        /*Fin Clases Posicionamiento Elementos*/

        /*Clases Alineación Textos*/

        .l-center{
            text-align: center;
            text-align-last: center;
        }

        .l-justify{
            text-align: justify;
        }

        .l-right{
            text-align: right;
        }

        .l-left{
            text-align: left;
        }

        /*Fin Clases Alineación Textos*/

        /*Clases Disposición Elementos*/

        .l-row{
            flex-flow: row wrap;
        }

        .l-column{
            flex-direction: column;
        }

        .l-rr{
            flex-direction: row-reverse;
        }

        .l-cr{
            flex-direction: column-reverse;
        }

        .l-jcc{
            justify-content: center;
        }

        .l-jcsb{
            justify-content: space-between;
        }

        .l-jcsa{
            justify-content: space-around;
        }

        .l-jcfs{
            justify-content: flex-start;
        }

        .l-jcfe{
            justify-content: flex-end;
        }

        .l-aic{
            align-items: center;
        }

        .l-aifs{
            align-items: flex-start;
        }

        .l-aife{
            align-items: flex-end;
        }

        .l-aibl{
            align-items: baseline;
        }

        .l-ais{
            align-items: stretch;
        }

        /*Fin Clases Disposición Elementos*/

        /*Clases Ancho Elementos*/

        .l-100{
            width: 100%;
        }

        .l-98{
            width: 98%;
        }

        .l-95{
            width: 95%;
        }

        .l-90{
            width: 90%;
        }

        .l-85{
            width: 85%;
        }

        .l-80{
            width: 80%;
        }

        .l-75{
            width: 75%;
        }

        .l-72{
            width: 72%;
        }

        .l-70{
            width: 70%;
        }

        .l-67{
            width: 67%;
        }

        .l-66{
            width: 66%;
        }

        .l-65{
            width: 65%;
        }

        .l-60{
            width: 60%;
        }

        .l-55{
            width: 55%;
        }

        .l-50{
            width: 50%;
        }

        .l-47{
            width: 47.5%;
        }

        .l-45{
            width: 45%;
        }

        .l-40{
            width: 40%;
        }

        .l-35{
            width: 35%;
        }

        .l-33{
            width: 33%;
        }

        .l-30{
            width: 30%;
        }

        .l-25{
            width: 25%;
        }

        .l-24{
            width: 24%;
        }

        .l-23{
            width: 23%;
        }

        .l-22{
            width: 22.5%;
        }

        .l-20{
            width: 20%;
        }

        .l-15{
            width: 15%;
        }

        .l-10{
            width: 10%;
        }

        .l-5{
            width: 5%;
        }

        /*Fin Clases Ancho Elementos*/
}

/* ==== xl (min-width: 1680px) ==== */

@media only screen and (min-width: 1680px){

    .centrado{
        max-width: 1400px;
    }

        /*Clases Posicionamiento Elementos*/

        .xl-rel{
            position: relative;
        }

        .xl-abs{
            position: absolute;
        }

        .xl-fix{
            position: fixed;
        }

        /*Fin Clases Posicionamiento Elementos*/

        /*Clases Alineación Textos*/

        .xl-center{
            text-align: center;
            text-align-last: center;
        }

        .xl-justify{
            text-align: justify;
        }

        .xl-right{
            text-align: right;
        }

        .xl-left{
            text-align: left;
        }

        /*Fin Clases Alineación Textos*/

        /*Clases Disposición Elementos*/

        .xl-row{
            flex-flow: row wrap;
        }

        .xl-column{
            flex-direction: column;
        }

        .xl-rr{
            flex-direction: row-reverse;
        }

        .xl-cr{
            flex-direction: column-reverse;
        }

        .xl-jcc{
            justify-content: center;
        }

        .xl-jcsb{
            justify-content: space-between;
        }

        .xl-jcsa{
            justify-content: space-around;
        }

        .xl-jcfs{
            justify-content: flex-start;
        }

        .xl-jcfe{
            justify-content: flex-end;
        }

        .xl-aic{
            align-items: center;
        }

        .xl-aifs{
            align-items: flex-start;
        }

        .xl-aife{
            align-items: flex-end;
        }

        .xl-aibl{
            align-items: baseline;
        }

        .xl-ais{
            align-items: stretch;
        }

        /*Fin Clases Disposición Elementos*/

        /*Clases Ancho Elementos*/

        .xl-100{
            width: 100%;
        }

        .xl-98{
            width: 98%;
        }

        .xl-95{
            width: 95%;
        }

        .xl-90{
            width: 90%;
        }

        .xl-85{
            width: 85%;
        }

        .xl-80{
            width: 80%;
        }

        .xl-75{
            width: 75%;
        }

        .xl-72{
            width: 72%;
        }

        .xl-70{
            width: 70%;
        }

        .xl-67{
            width: 67%;
        }

        .xl-66{
            width: 66%;
        }

        .xl-65{
            width: 65%;
        }

        .xl-60{
            width: 60%;
        }

        .xl-55{
            width: 55%;
        }

        .xl-50{
            width: 50%;
        }

        .xl-47{
            width: 47.5%;
        }

        .xl-45{
            width: 45%;
        }

        .xl-40{
            width: 40%;
        }

        .xl-35{
            width: 35%;
        }

        .xl-33{
            width: 33%;
        }

        .xl-30{
            width: 30%;
        }

        .xl-25{
            width: 25%;
        }

        .xl-24{
            width: 24%;
        }

        .xl-23{
            width: 23%;
        }

        .xl-22{
            width: 22.5%;
        }

        .xl-20{
            width: 20%;
        }

        .xl-15{
            width: 15%;
        }

        .xl-10{
            width: 10%;
        }

        .xl-5{
            width: 5%;
        }

        /*Fin Clases Ancho Elementos*/
}

body { margin: 0; }
.btn.rd { display: inline-block; padding: 10px 20px; cursor: pointer; }