@font-face {
    font-family: "HelveticaNowMicroW05-Rg";
    src: url("Fonts/HelveticaNowMicroW05-Rg.eot?#iefix");
    src: url("Fonts/HelveticaNowMicroW05-Rg.eot?#iefix") format("eot"), url("Fonts/HelveticaNowMicroW05-Rg.woff2") format("woff2"), url("Fonts/HelveticaNowMicroW05-Rg.woff") format("woff"), url("Fonts/HelveticaNowMicroW05-Rg.ttf") format("truetype");
}

@font-face {
    font-family: "HelveticaNowMicroW05-Bold";
    src: url("Fonts/HelveticaNowMicroW05-Bold.eot?#iefix");
    src: url("Fonts/HelveticaNowMicroW05-Bold.eot?#iefix") format("eot"), url("Fonts/HelveticaNowMicroW05-Bold.woff2") format("woff2"), url("Fonts/HelveticaNowMicroW05-Bold.woff") format("woff"), url("Fonts/HelveticaNowMicroW05-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "HelveticaNowTextW05-Medium";
    src: url("Fonts/HelveticaNowTextW05-Medium.eot?#iefix");
    src: url("Fonts/HelveticaNowTextW05-Medium.eot?#iefix") format("eot"), url("Fonts/HelveticaNowTextW05-Medium.woff2") format("woff2"), url("Fonts/HelveticaNowTextW05-Medium.woff") format("woff"), url("Fonts/HelveticaNowTextW05-Medium.ttf") format("truetype");
}

@font-face {
    font-family: "HelveticaNowDisplayW05-XBd";
    src: url("Fonts/HelveticaNowDisplayW05-XBd.eot?#iefix");
    src: url("Fonts/HelveticaNowDisplayW05-XBd.eot?#iefix") format("eot"), url("Fonts/HelveticaNowDisplayW05-XBd.woff2") format("woff2"), url("Fonts/HelveticaNowDisplayW05-XBd.woff") format("woff"), url("Fonts/HelveticaNowDisplayW05-XBd.ttf") format("truetype");
}

@font-face {
    font-family: "HelveticaNowDisplayW05-Bold";
    src: url("Fonts/HelveticaNowDisplayW05-Bold.eot?#iefix");
    src: url("Fonts/HelveticaNowDisplayW05-Bold.eot?#iefix") format("eot"), url("Fonts/HelveticaNowDisplayW05-Bold.woff2") format("woff2"), url("Fonts/HelveticaNowDisplayW05-Bold.woff") format("woff"), url("Fonts/HelveticaNowDisplayW05-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "HelveticaNowDisplayW05-Md";
    src: url("Fonts/HelveticaNowDisplayW05-Md.eot?#iefix");
    src: url("Fonts/HelveticaNowDisplayW05-Md.eot?#iefix") format("eot"), url("Fonts/HelveticaNowDisplayW05-Md.woff2") format("woff2"), url("Fonts/HelveticaNowDisplayW05-Md.woff") format("woff"), url("Fonts/HelveticaNowDisplayW05-Md.ttf") format("truetype");
}

@font-face {
    font-family: "HelveticaNowDisplayW05-Rg";
    src: url("Fonts/HelveticaNowDisplayW05-Rg.eot?#iefix");
    src: url("Fonts/HelveticaNowDisplayW05-Rg.eot?#iefix") format("eot"), url("Fonts/HelveticaNowDisplayW05-Rg.woff2") format("woff2"), url("Fonts/HelveticaNowDisplayW05-Rg.woff") format("woff"), url("Fonts/HelveticaNowDisplayW05-Rg.ttf") format("truetype");
}

@font-face {
    font-family: "HelveticaNowDisplayW05-XLt";
    src: url("Fonts/HelveticaNowDisplayW05-XLt.eot?#iefix");
    src: url("Fonts/HelveticaNowDisplayW05-XLt.eot?#iefix") format("eot"), url("Fonts/HelveticaNowDisplayW05-XLt.woff2") format("woff2"), url("Fonts/HelveticaNowDisplayW05-XLt.woff") format("woff"), url("Fonts/HelveticaNowDisplayW05-XLt.ttf") format("truetype");
}

@font-face {
    font-family: "HelveticaNowTextW05-XBold";
    src: url("Fonts/HelveticaNowTextW05-XBold.eot?#iefix");
    src: url("Fonts/HelveticaNowTextW05-XBold.eot?#iefix") format("eot"), url("Fonts/HelveticaNowTextW05-XBold.woff2") format("woff2"), url("Fonts/HelveticaNowTextW05-XBold.woff") format("woff"), url("Fonts/HelveticaNowTextW05-XBold.ttf") format("truetype");
}

@font-face {
    font-family: "HelveticaNowTextW05-Bold";
    src: url("Fonts/HelveticaNowTextW05-Bold.eot?#iefix");
    src: url("Fonts/HelveticaNowTextW05-Bold.eot?#iefix") format("eot"), url("Fonts/HelveticaNowTextW05-Bold.woff2") format("woff2"), url("Fonts/HelveticaNowTextW05-Bold.woff") format("woff"), url("Fonts/HelveticaNowTextW05-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "HelveticaNowTextW05-Regular";
    src: url("Fonts/HelveticaNowTextW05-Regular.eot?#iefix");
    src: url("Fonts/HelveticaNowTextW05-Regular.eot?#iefix") format("eot"), url("Fonts/HelveticaNowTextW05-Regular.woff2") format("woff2"), url("Fonts/HelveticaNowTextW05-Regular.woff") format("woff"), url("Fonts/HelveticaNowTextW05-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "HelveticaNowMicroW05-Medium";
    src: url("Fonts/HelveticaNowMicroW05-Medium.eot?#iefix");
    src: url("Fonts/HelveticaNowMicroW05-Medium.eot?#iefix") format("eot"), url("Fonts/HelveticaNowMicroW05-Medium.woff2") format("woff2"), url("Fonts/HelveticaNowMicroW05-Medium.woff") format("woff"), url("Fonts/HelveticaNowMicroW05-Medium.ttf") format("truetype");
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.web-frosi {
    text-align: center !important;
    padding-top: 50px !important;
    font-size: 12px !important;
}
/*PANTALLA 1*/

.ocultar {
    display: none;
}

.mostrar {
    display: block;
}

.header {
    text-align: center;
    margin: 2vw 0;
}

.logo {
    background: #FF812A;
    color: #fff;
    font-family: "HelveticaNowDisplayW05-Bold";
    border-radius: 50px;
    margin: 1.5vh auto 2vh auto;
    display: inline-block;
    padding: 15px 20px;
}

.titulo-header{
    font-family: "HelveticaNowDisplayW05-XBd";
    color: #FF812A;
    font-size: 7vw;
    text-align: center;
    margin-top: 1vh;
}

.header-link {
    margin: 5vw 5vw;
    text-align: center;
}

.header-link p{
    font-family: "HelveticaNowTextW05-Medium";
    color: #717274;
    font-size: 3.5vw;
    text-decoration: none;
}

.leer-mas {
    background: url('img/leer-mas.svg') no-repeat;
    width: 27vw;
    height: 12vw;
    background-size: contain;
    margin: auto;
    cursor: pointer;
}

.planifica {
    display: inline-block;
    width: 50vw;
    height: calc(50vw * 1.35416);
    background-image: url("img/planifica-cinta.svg"), url("img/planifica.svg"), url("img/planifica-fondo.svg");
    background-position: center, center, center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: contain, contain, contain;
    cursor: pointer;
}

.aborda {
    float: right;
    width: 50vw;
    height: calc(50vw * 1.35416);
    background-image: url("img/aborda-cinta.svg"), url("img/aborda.svg"), url("img/aborda-fondo.svg");
    background-position: center, center, center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: contain, contain, contain;
    cursor: pointer;
}

.sorprende {
    display: inline-block;
    width: 50vw;
    height: calc(50vw * 1.35416);
    background-image: url("img/sorprende-cinta.svg"), url("img/sorprende.svg"), url("img/sorprende-fondo.svg");
    background-position: center, center, center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: contain, contain, contain;
    margin-top: -.64vh;
    cursor: pointer;
}

.optimiza {
    float: right;
    width: 50vw;
    height: calc(50vw * 1.35416);
    background-image: url("img/optimiza-cinta.svg"), url("img/optimiza.svg"), url("img/optimiza-fondo.svg");
    background-position: center, center, center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: contain, contain, contain;
    margin-top: -.64vh;
    cursor: pointer;
}

/*POP UP*/

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
}


.popup {
    background: #fff;
    margin: 5vh auto;
    padding: 3vw;
    border-radius: 5px;
    width: 95%;
    height: 90%;
    position: relative;
}

.texto_popup {
    margin: 10vw auto;
    width: 90%;
}

.texto_popup p {
    font-family: "HelveticaNowTextW05-Regular";
    color: #717274;
    font-size: 3.9vw;
    margin: 3vw;
    margin: 3vw auto;
}

/*PANTALLA 2*/

.titulo-planifica, .titulo-aborda, .titulo-sorprende, .titulo-optimiza {
    font-family: "HelveticaNowDisplayW05-XBd";
    font-size: 12vw;
    text-align: center;
    margin-top: 1vh;
}

.titulo-planifica {
    color: #6F57B7;
}

.titulo-aborda {
    color: #30A9C7;
}

.titulo-sorprende {
    color: #80B740;
}

.titulo-optimiza {
    color: #ECD223;
}

.cerrar, .cerrar-popup {
    width: 7vw;
    height: 7vw;
    background: url(img/cerrar.svg) no-repeat right;
    background-size: 100%;
    position: absolute;
    right: 6%;
    top: 2%;
    cursor: pointer;
}

.header-p2 {
    margin-top: 12vw;
}

.botones-p2 {
    text-align: center;
    background: url("img/cinta-botones.svg") no-repeat center center;
    background-size: 90%;
    margin: 18vw 0 0 0;
}

.caja-boton {
    display: inline-block;
    margin: 0 2vw;
    cursor: pointer;
    vertical-align: middle;
}

.planifica-p2 {
    width: 17vw;
    height: 17vw;
    background: url("img/planifica-p2.svg") no-repeat center center;
    background-size: contain;
}

.aborda-p2 {
    width: 17vw;
    height: 17vw;
    background: url("img/aborda-p2.svg") no-repeat center center;
    background-size: contain;
}

.sorprende-p2 {
    width: 17vw;
    height: 17vw;
    background: url("img/sorprende-p2.svg") no-repeat center center;
    background-size: contain;
}

.optimiza-p2 {
    width: 17vw;
    height: 17vw;
    background: url("img/optimiza-p2.svg") no-repeat center center;
    background-size: contain;
}

.hover-script {
    width: 20vw;
    height: 20vw;
}

.caja-1 {
    margin: 3vw;
}

.gif-1 {
    background: url(img/icono-planifica.gif) no-repeat;
    background-size: contain;
    width: 20vw;
    height: 20vw;
    margin: 2vw 0 8vw 38.5vw;
}

.gif-2 {
    background: url(img/icono-aborda.gif) no-repeat;
    background-size: contain;
    width: 20vw;
    height: 20vw;
    margin: 2vw 0 8vw 38.5vw;
}

.gif-3 {
    background: url(img/icono-sorprende.gif) no-repeat;
    background-size: contain;
    width: 20vw;
    height: 20vw;
    margin: 2vw 0 8vw 38.5vw;
}

.gif-4 {
    background: url(img/icono-optimiza.gif) no-repeat;
    background-size: contain;
    width: 20vw;
    height: 20vw;
    margin: 2vw 0 8vw 38.5vw;
}

.subtitulo-planifica, .subtitulo-aborda, .subtitulo-sorprende, .subtitulo-optimiza {
    display: inline-block;
    font-family: "HelveticaNowDisplayW05-XBd";
    font-size: 5.5vw;
    vertical-align: super;
}

.subtitulo-planifica, .texto-planifica {
    color: #032974;
}

.subtitulo-aborda, .texto-aborda {
    color: #006272;
}

.subtitulo-sorprende, .texto-sorprende {
    color: #106700;
}

.subtitulo-optimiza, .texto-optimiza {
    color: #485001;
}

.texto-planifica, .texto-aborda, .texto-sorprende, .texto-optimiza {
    font-family: "HelveticaNowTextW05-Regular";
    font-size: 4vw;
    padding: 5vw 0;
}

.texto-li {
    font-family: "HelveticaNowTextW05-Regular";
    color: #485001;
    font-size: 4vw;
    padding: 0 0 0 4vw;
}

.caja-2 {
    margin-bottom: 5vw;
    padding-bottom: 5vw;
    border-bottom: dotted #9D9D9D .6vw;
}

.practica-mobile {
    text-align: center;
}

.texto-practica-izq, .texto-practica-der {
    display: none;
}

.cinta {
    height: 20vw;
    position: relative;
    margin: 2vw 0;
    cursor: pointer;
}

.cinta-desktop {
    display: none;
}

.cinta-planifica {
    background: url('img/practica-planifica.svg') no-repeat center;
    background-size: contain;
}

.cinta-aborda {
    background: url('img/practica-aborda.svg') no-repeat center;
    background-size: contain;
}

.cinta-sorprende {
    background: url('img/practica-sorprende.svg') no-repeat center;
    background-size: contain;
}

.cinta-optimiza {
    background: url('img/practica-optimiza.svg') no-repeat center;
    background-size: contain;
}

.mas {
    background: url('img/mas.svg') no-repeat;
    background-size: contain;
    height: 9vw;
    width: 9vw;
    position: absolute;
    top: 5vw;
    left: 22vw;
}

.texto-pc {
    display: none;
}

.abierto .mas {
    background: url('img/menos.svg') no-repeat;
    background-size: contain;
    height: 9vw;
    width: 9vw;
    position: absolute;
    top: 5vw;
    left: 22vw;
}

.practica-pc {
    display: none;
}

.texto {
    font-family: "HelveticaNowTextW05-Regular";
    color: #fff;
    font-size: 3.3vw;
    padding: 4vw;
    line-height: 130%;
    margin: -6vw 3vw 3vw 3vw;
    box-shadow: 0 5px 10px 0 #888888;
}

.textooptimiza1 ul {
    padding: 0 5vw;
}

.textoplanifica1, .textoplanifica2 {
    background: #00A5AD;
}
    
.textoaborda1, .textoaborda2 {
    background: #4B84BE;
}
    
.textosorprende1, .textosorprende2 {
    background: #31B8B4;
}
    
.textooptimiza1, .textooptimiza2 {
    background: #A0C35C;
}

.clave-planifica {
    background: url('img/clave-planifica.svg') no-repeat top;
    background-size: 100%;
    height: 35vw;
}

.clave-aborda {
    background: url('img/clave-aborda.svg') no-repeat top;
    background-size: 100%;
    height: 48vw;
}

.clave-sorprende {
    background: url('img/clave-sorprende.svg') no-repeat top;
    background-size: 100%;
    height: 48vw;
}

.clave-optimiza {
    background: url('img/clave-optimiza.svg') no-repeat top;
    background-size: 100%;
    height: 48vw;
}

.titulo-clave {
    font-family: "HelveticaNowDisplayW05-XBd";
    color: #fff;
    font-size: 4.5vw;
    padding: 6vw 0 0 42vw;
}

.texto-clave {
    font-family: "HelveticaNowTextW05-Regular";
    color: #fff;
    font-size: 3.5vw;
    line-height: 120%;
}

.texto-clave-planifica {
    padding: 1vw 4vw 1vw 13vw;
}

.texto-clave-aborda {
    padding: 1vw 4vw 1vw 10vw;
}

.texto-clave-sorprende {
    padding: 1vw 4vw 1vw 11vw;
}

.texto-clave-optimiza {
    padding: 1vw 4vw 1vw 11vw;
}

@media screen and (min-width: 769px) {
    
    .p1 {
        text-align: center;
        width: 85vw;
        margin: auto;
    }
    
    .titulo-header {
        font-size: 2.5vw;
    }
    
    .header-link p {
        font-size: 1.2vw;
        margin-bottom: 2vw;
    }
    
    .flecha-1 {
        background: url(img/flecha-1.svg) no-repeat top;
        background-size: contain;
        width: 5vw;
        height: 4vw;
        display: inline-block;
    }
    
    .leer-mas {
        width: 7vw;
        height: 5vw;
        display: inline-block;
    }
    
    .leer-mas:hover {
       background: url(img/leer-mas-hover.svg) no-repeat;
        background-size: contain;
    }
    
    .planifica{
        width: 20vw;
        height: calc(20vw * 1.35416);
        background-image: url("img/planifica-cinta.png"), url("img/planifica-pc.svg"), url("img/planifica-fondo-pc.svg");
    }
    
    .aborda{
        width: 20vw;
        height: calc(20vw * 1.35416);
        background-image: url("img/aborda-cinta.png"), url("img/aborda-pc.svg");
        display: inline-block;
        float: none;
    }
    
    .sorprende{
        width: 20vw;
        height: calc(20vw * 1.35416);
        background-image: url("img/sorprende-cinta.png"), url("img/sorprende-pc.svg");
    }
    
    .optimiza{
        width: 20vw;
        height: calc(20vw * 1.35416);
        background-image: url("img/optimiza-cinta.png"), url("img/optimiza-pc.svg"), url("img/optimiza-fondo-pc.svg");
        float: none;
        display: inline-block;
    }
    
    .cerrar, .cerrar-popup {
        width: 2.5vw;
        height: 2.5vw;
        right: 4%;
        top: 3%;
    }
    
    .texto_popup {
        margin: 4vw auto;
    }
    
    .texto_popup p {
        font-size: 1.5vw;
        text-align: left;
    }
    
    /*PANTALLA 2*/
    
    .header-p2 {
        margin-top: 0;
    }
    
    .header-link {
        margin: .5vw;
        display: inline-block;
    }
    
    .caja-boton {
        margin: 0;
    }
    
    .botones-p2 {
        margin: 0;
        float: left;
        width: 10%;
        background: none;
    }
    
    .titulo-planifica, .titulo-aborda, .titulo-sorprende, .titulo-optimiza {
        font-size: 4.5vw;
    }
    
    .flecha-amarilla-1, .flecha-amarilla-2 {
        background: url(img/flecha-amarilla.svg) no-repeat;
    }
    
    .flecha-verde-1, .flecha-verde-2 {
        background: url(img/flecha-verde.svg) no-repeat;
    }
    
    .flecha-violeta-1, .flecha-violeta-2 {
        background: url(img/flecha-violeta.svg) no-repeat;
    }
    
    .flecha-azul-1, .flecha-azul-2 {
        background: url(img/flecha-azul.svg) no-repeat;
    }
    
    .flecha-amarilla-1, .flecha-verde-1, .flecha-violeta-1, .flecha-azul-1 {
        width: 4vw;
        height: 9.5vw;
        background-size: contain;
        display: inline-block;
        margin: -2vw 0 0 30.2vw;
    }
    
    .gif-1, .gif-2, .gif-3, .gif-4 {
        width: 6vw;
        height: 8vw;
        display: inline-block;
        margin: 0 0 0 6vw;
    }
    
    .flecha-amarilla-2, .flecha-verde-2, .flecha-violeta-2, .flecha-azul-2 {
        width: 4vw;
        height: 9.5vw;
        background-size: contain;
        display: inline-block;
        margin: -3vw 0 0 5vw;
        transform: scaleX(-1);
    }
    
    .planifica-p2 {
        background: url(img/planifica-p2-pc.svg) no-repeat left;
        width: 10vw;
        height: 10vw;
        background-size: contain;
        transition: all .5s ease;
        margin: .5vw 2vw;
    }
    
    .aborda-p2 {
        background: url(img/aborda-p2.svg) no-repeat left;
        width: 10vw;
        height: 10vw;
        background-size: contain;
        transition: all .5s ease;
        margin: .5vw 2vw;
    }
    
    .sorprende-p2 {
        background: url(img/sorprende-p2.svg) no-repeat left;
        width: 10vw;
        height: 10vw;
        background-size: contain;
        transition: all .5s ease;
        margin: .5vw 2vw;
    }
    
    .optimiza-p2 {
        background: url(img/optimiza-p2-pc.svg) no-repeat left;
        width: 10vw;
        height: 10vw;
        background-size: contain;
        transition: all .5s ease;
        margin: .5vw 2vw;
    }
    
    .hover-script {
        width: 11vw;
        height: 11vw;
    }
    
    .planifica-p2:hover, .aborda-p2:hover, .sorprende-p2:hover, .optimiza-p2:hover {
        width: 11vw;
        height: 11vw;
    }
    
    .titulo-boton {
        display: none;
    }
    
    .caja-1 {
        margin: 0 0 0 14vw;
    }
    
    .caja-2 {
        display: inline-block;
        width: 38%;
        margin: -4vw 2vw 0 2vw;
        border: none;
        padding: none;
    }
    
    .derecha {
        float: right;
    }
    
    .subtitulo-planifica, .subtitulo-aborda, .subtitulo-sorprende, .subtitulo-optimiza {
        font-size: 2vw;
    }
    
    .cinta-planifica, .cinta-aborda, .cinta-sorprende, .cinta-optimiza {
        display: none;
    }
    
    .cinta-planifica-pc, .cinta-aborda-pc, .cinta-sorprende-pc, .cinta-optimiza-pc {
        background: url('img/practica-planifica.svg') no-repeat center;
        background-size: contain;
        top: 20.5vw;
    }
    
    .cinta {
        width: 20vw;
        height: 10vw;
        margin: auto;
        position: absolute;
        left: 45vw;
    }
    
    .cinta-desktop {
        display: block;
    }
    
    .practica-pc {
        display: block;
        text-align: center;
    }
    
    .texto-pc {
        display: inline-block;
    }
    
    .texto-mobile {
        display: none;
    }
    
    .mas {
        height: 3vw;
        width: 3vw;
        top: 3.4vw;
        left: 1.5vw;
    }
    
    .abierto .mas {
        height: 3vw;
        width: 3vw;
        top: 3.4vw;
        left: 1.5vw;
    }
    
    .texto-planifica, .texto-aborda, .texto-sorprende, .texto-optimiza {
        font-size: 1.2vw;
        padding: 1vw 0;
        line-height: 120%;
    }
    
    .texto-li {
        font-size: 1.2vw;
        padding: 0 2vw;
        line-height: 120%;
    }
    
    .texto {
        font-family: "HelveticaNowTextW05-Regular";
        color: #fff;
        line-height: 130%;
        box-shadow: 0 5px 10px 0 #888888;
        font-size: 1.2vw;
        padding: 2vw 1.5vw 1.5vw 1.5vw;
        width: 41%;
        vertical-align: top;
    }
    
    .textooptimiza1 ul {
        padding: 0 2vw;
    }
    
    .texto-practica-izq {
        margin: 0 5vw 0 2vw;
    }
    
    .texto-practica-der {
        margin: 0 0 0 5vw;
    }
    
    .texto-practica-li {
        font-size: 1.2vw;
        padding: 1vw 2.5vw 1vw 5vw;
    }
    
    .clave-planifica {
        height: 14vw;
        background-size: contain;
        margin-top: 2vw;
        background-position: 45%;
    }
    
    .clave-aborda {
        height: 18vw;
        background-size: contain;
        margin-top: 2vw;
        background-position: 45%;
    }
    
    .clave-sorprende {
        height: 14vw;
        background-size: contain;
        margin-top: 2vw;
        background-position: 45%;
    }
    
    .clave-optimiza {
        height: 17vw;
        background-size: contain;
        margin-top: 2vw;
        background-position: 45%;
    }
    
    .titulo-clave {
        font-size: 2vw;
        padding: 2.5vw 0 0 38vw;
        text-align: left;
    }
    
    .texto-clave {
        font-size: 1.2vw;
    }
    
    .texto-clave-planifica {
        padding: .5vw 29vw .5vw 27.5vw;
    }
    
    .texto-clave-sorprende {
        padding: .5vw 30.5vw .5vw 26vw;
    }

    .texto-clave-aborda, .texto-clave-optimiza {
        padding: 0 29vw 0 26.5vw;
    }
    
}