/* Parametros */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

* {
    padding: 0px;
    margin: 0px;
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* ============================= */
/* Reglas recursivas */
/* ============================= */
a {
    text-decoration: none;
}

i {
    font-size: 1.2rem;
}

/* Chevron down */
.chevron {
    margin-top: 2rem;
    display: block;
    text-align: center;
}

.chevron img {
    height: 50px;
}
/* Fin chevron down */

/* Cuadros - portfolio */
.card {
    width: 100%;
    height: 200px;
    border-radius: 14px;
    background-color: rgb(0, 0, 0);
    margin: 5px 0;
    background-image: linear-gradient(#00000017, #0000008e), url('../img/img5.jpg');
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    text-decoration: none;
    background-size: 110%;
    transition: .3s all;
}

.card:hover,
.card:focus {
    background-size: 120%;
}

.card-content {
    position: absolute;
    left: 0;
    bottom: 15px;
    padding: 5px 15px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.5rem;
}
/* Fin cuadros - portfolio */

/* Botones portfolio */
.badge {
    display: inline;
    text-decoration: none;
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #000;
    padding: 7px 20px;
    border-radius: 9px;
    border: none;
    margin-bottom: 3px;
    cursor: pointer;
}

.bg-primary {
    background-color: #000;
    color: #fff;
}

.bg-secondary {
    background-color: #088190;
    color: #fff;
}

.bg-orange {
    background-color: #fa4a1a;
    color: #fff;
}

.bg-todos {
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
}
/* Fin Botones portfolio */

.img-fluid {
    width: 100%;
    border-radius: 7px;
}

/* Fin reglas recursivas */


/* ============================= */
/* Reglas generales */
/* ============================= */

.container {
    max-width: 992px;
    padding: 15px 25px;
    margin: 0 auto;
}

/* Spinner - Carga principal*/
.spinner {
    width: 100%;
    height: 100%;
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
}
/* Fin spinner */

/* Header */
/* ============================= */
header {
    width: 100%;
    color: black;
    position: fixed;
    z-index: 999;
}

.logo img {
    height: 15px;
}

/* Menu mob */
.menu_mob {
    /* flex */
    display: flex;
    justify-content: space-between;
}

/* Fondo menu mob */
#mobileNavbar {
    height: 100%;
    width: 0;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    overflow-x: hidden;
    transition: 0.3s;
}

.overlay-content {
    position: relative;
    top: 10%;
    width: 100%;
    margin-top: 30px;
    padding-left: 20px;
}

.overlay-content a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #202020;
    display: block;
    transition: 0.2s;
}

.overlay-content a:hover,
.overlay-content a:focus {
    color: #5c5c5c;
}

.mobile-btns {
    z-index: 9999;
    text-decoration: none;
    color: #000;
}

#closeMenuMobile {
    display: none;
}

.mobile-btns > button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}
/* Fin overlay */

.menu_desk {
    display: none;
}
/* Fin header */

/* Footer */
/* ============================= */
footer {
    width: 100%;
    background-color: white;
    text-align: center;
    padding: 50px 0;
}

.footer-links > a {
    text-decoration: none;
    color: #000;
}

footer .rrss i {
    font-size: 30px;
}
/* Fin footer */


/* ============================= */
/* Reglas específicas */
/* ============================= */

/* SECCION 1 - Presentacion */
/* ============================= */
.s1 {
    width: 100%;
    height: calc(100vh - 52px);
    position: relative;
    z-index: 50;
    color: black;
    background-color: #fff;
    overflow: hidden;
    /* Flex */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.bg-hero {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    animation: hero-animation 10s infinite alternate;
}

.bg-hero img {
    height: 500px;
    opacity: 0.6;
    animation: hero-img-animation 10s infinite alternate;
}

/* Animación Background */
@keyframes hero-animation {
    0% {
        top: 45%;
        left: 45%;
        transform: translate(-45%, -45%);
    }

    25% {
        top: 55%;
        left: 55%;
        transform: translate(-55%, -55%);
    }

    50% {
        top: 50%;
        left: 60%;
        transform: translate(-50%, -60%);
    }

    100% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
@keyframes hero-img-animation {
    0% {
        height: 500px;
    }

    25% {
        height: 700px;
    }

    50% {
        height: 500px;
    }

    100% {
        height: 700px;
    }
}
/* Fin Animación Background */

.s1_content {
    padding-bottom: 25px;
    z-index: 9;
}

.s1 h1 {
    font-size: 35px;
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 39px;
}

.s1 h2 {
    font-weight: 300;
    margin-bottom: 15px;
}

.sub-nab {
    padding-top: 15px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.sub-nab > a {
    width: 100%;
    font-size: 0.75rem;
    background-color: transparent;
    color: #000;
    text-transform: uppercase;
    border: 1.3px solid #000;
    text-decoration: none;
    text-align: center;
    margin: 0 .3rem;
    padding: .4rem;
    border-radius: 10px;
    transition: .2s;
}

.sub-nab>a:hover,
.nav-computer>a:focus {
    color: #fff;
    background-color: #000;
}
/* Fin de la seccion 1 */


/* SECCION 2 - Conoceme */
/* ============================= */
.s2 {
    min-height: 85vh;
    width: 100%;
    background: white;
    background-attachment: fixed;
    padding: 60px 0px;
    color: black;
    display: flex;
    align-items: center;
}

.s2-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.s2-media .left > img {
    width: 100%;
    margin-bottom: 30px;
}

.s2-media .right p {
    font-size: 0.9rem;
    line-height: 1.5rem;
}

.s2 span {
    font-size: 35px;
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 39px;
}

.s2 h2 {
    font-weight: 300;
}

.s2 p {
    font-size: 0.9rem;
    font-weight: 400;
    padding: 5px 0px;
}

.software {
    margin-top: 15px;
    border-radius: 20px;
    text-align: center;
    padding: 5px 0 10px 0;
    /* Flex */
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.software img {
    max-width: 40px;
    max-height: 40px;
    padding: 5px 5px 0 0;
}
/* Fin de la seccion 2 */


/* DIVISOR - Portfolio */
/* ============================= */
.divisor-portfolio {
    width: 100%;
    background-image: linear-gradient(rgba(255, 255, 255, 0.384), rgba(255, 255, 255, 0.384)), url(../img/hero-bg.png);
    background-position: center;
    background-size: cover;
    background-size: 160%;
    background-repeat: no-repeat;
    padding: 50px 0px;
}

.divisor-portfolio h2 {
    font-size: 4rem;
    line-height: 0.8;
    letter-spacing: -0.2rem;
}

.divisor-portfolio p {
    font-size: 15px;
    font-weight: 400;
    padding: 15px 0 10px 5px;
}

/* Fin de divisor */


/* SECCION 3 - PORTFOLIO */
/* ============================= */
.s3 {
    width: 100%;
    color: black;
    padding: 30px 0px;
}

.s3 h2 {
    font-size: 25px;
}

.s3 p {
    font-size: 13px;
    font-weight: 400;
}

.portfolio-container {
    margin-top: 27px;
    /* FLEX */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.avanza {
    background-image: linear-gradient(#00000017, #0000008e), url('../img/avanza.jpg');
}

.post_bg_avanza {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgb(255, 255, 255));
    background-color: #b32015;
}

.uva {
    background-image: linear-gradient(#00000017, #0000008e), url('../img/uva.png');
}

#embedVideo {
    margin: 20px 0;
    border-radius: 15px;
    height: 315px;
    width: 100%;
}

.laorla {
    background-image: linear-gradient(#00000017, #0000008e), url('../img/laorla.png');
    background-color: #fff;
}

/* Posts background color */
.post_bg_uva {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgb(255, 255, 255));
    background-color: #474262;
}

.post_bg_laorla {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgb(255, 255, 255));
    background-color: #4864f3;
}

.post_bg_pilates {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgb(255, 255, 255));
    background-color: #8ba052;
}

.post_bg_bonka {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgb(255, 255, 255));
    background-color: #2f5251;
}

.post_bg_natura {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgb(255, 255, 255));
    background-color: #6f81a2;
}

.pozuelo {
    background-image: linear-gradient(#00000017, #0000008e), url(../img/flyer.png);
}

.bonka {
    background-image: linear-gradient(#00000017, #0000008e), url(../img/bonka_portada.png);
}

.tropicana {
    background-image: linear-gradient(#00000017, #0000008e), url(../img/tropicana.jpg);
}

.jabon {
    background-image: linear-gradient(#00000017, #0000008e), url(../img/JABON_portada.jpg);
}

.maduro {
    background-image: linear-gradient(#00000017, #0000008e), url(../img/maduro.png);
}

/* Portfolio post */
.hero-portfolio-img {
    padding: 4rem 0 2rem 0;
    min-height: 7rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.portfolio-post-content p {
    margin-bottom: 1rem;
    text-align: justify;
}

.boton_portfolio {
    font-size: 1rem;
    border: 1px solid #fff;
    background-color: #000;
    color: #fff;
    padding: 10px 25px;
    border-radius: 10px;
    transition: 0.3s;
    visibility: visible;
}

.boton_portfolio:hover {
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
}
/* Fin seccion 3 */


/* SECCION 4 - Qué ofrezco */
/* ============================= */
.s4 {
    width: 100%;
    padding: 65px 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.384), rgba(255, 255, 255, 0.384)), url(../img/hero-bg.png);
    background-size: cover;
}

.s4 h2 {
    font-size: 35px;
}

.circulos {
    margin-top: 35px;
    /* Flex */
    display: flex;
    flex-wrap: wrap;
}

.cir {
    width: 100px;
    height: 100px;
    border: thin solid #000;
    border-radius: 50%;
    padding: 20px;
    margin: 10px auto;
}

.cir > i {
    font-size: 45px;
    line-height: 55px;
}

.offers {
    text-align: center;
    width: 100%;
    margin-bottom: 25px;
}

/* Fin secion 4 */


/* SECCION 5 - Opiniones */
/* ============================= */
.s5 {
    width: 100%;
    padding: 65px 0;
    background-color: #fff;
}

.s5 h2 {
    font-size: 35px;
}

.opiniones {
    margin-top: 25px;
    /* FLEX */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.opinion {
    border: 1px solid #000;
    width: 100%;
    margin-bottom: 10px;
    border-radius: 5px;
    padding: 15px 20px;
    transition: .2s;
}

.opinion:hover {
    transform: scale(1.05);
}

.opinion > p {
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 5px;
}

.opinion > span {
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
}

.stars {
    margin-bottom: 10px;
}
/* Fin seccion 5 */


/* SECCION 6 - Contacto */
/* ============================= */
.s6 {
    width: 100%;
    background-image: linear-gradient(rgba(255, 255, 255, 0.384), rgba(255, 255, 255, 0.384)), url(../img/hero-bg.png);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    padding: 100px 0px;
}

.s6 .container {
    /* Flex */
    display: flex;
    flex-wrap: wrap;
}

.s6_left {
    width: 100%;
}

.email {
    text-decoration: none;
    color: #000;
}

.rrss {
    width: 100%;
    margin: 20px auto;
}

.rrss a {
    text-decoration: none;
    color: rgb(17, 17, 17);
    padding: 3px;
}

.rrss a i {
    font-size: 30px;
}

.formulario {
    width: 100%;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .8);
    padding: 20px;
    margin: auto;
    border: thin solid #000;
}

.form_title {
    font-size: 25px;
    font-weight: 300;
    color: black;
    margin-bottom: 15px;
}

.casillas {
    padding: 3px 0px;
}

.casillas input {
    width: 100%;
    padding: 5px;
    margin-bottom: 15px;
    border-radius: 3px;
    background-color: #f6f6f6;
    border: thin solid #000;
    font-size: 16px;
    font-weight: 300;
    color: black;
}

.casillas input:focus {
    background-color: white;
    color: #8c8c73;
}

.casillas textarea {
    width: 100%;
    border-radius: 3px;
    background-color: #f6f6f6;
    border: thin solid #000;
    font-size: 16px;
    font-weight: 300;
    color: black;
    margin-bottom: 15px;
    padding: 5px;
}

.casillas textarea:focus {
    background-color: white;
    color: #8c8c73;
}

.casillas button {
    width: 100%;
    padding: 15px;
    margin: 5px 0px;
    background-color: #fff;
    border-radius: 3px;
    border: thin solid #000;
    color: #000;
    font-size: 20px;
}

.casillas button:hover {
    background-color: #000;
    color: #fff;
}
/* Fin seccion 6 */


/* ============================= */
/* VENTANA MODAL */
/* ============================= */
.modal {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .4);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    /* Flex */
    display: flex;
    justify-content: center;
    align-items: center;
}

#modal_cv {
    visibility: hidden;
}

.modal_container {
    min-width: 300px;
    background-color: #fff;
    padding: 50px 25px;
    margin: 0 15px;
    border-radius: 15px;
    text-align: center;
    position: relative;
}

.close_btn {
    position: absolute;
    top: 17px;
    right: 20px;
    color: #000;
    background-color: transparent;
    border: none;
}

.modal_container h1 {
    letter-spacing: -1.8px;
}

.modal_icon {
    font-size: 55px;
    color: #000;
    margin-bottom: 15px;
}

.modal_container p {
    margin-bottom: 45px;
}

.modal_container a {
    margin: 0;
}
/* Fin ventana modal */



/* ============================= */
/* MEDIA QUERY */
/* MEDIA - IPAD - 768px */
/* ============================= */
@media (min-width: 768px) {
    /* REGLAS RECURSIVAS */
    /* ============================= */
    .container {
        padding: 15px 45px;
    }

    .card {
        margin: 5px 5px;
        width: 48%;
        height: 200px;
    }

    .img-fluid {
        max-width: 500px;
    }

    /* Header */
    /* ============================= */
    .menu_mob {
        display: none;
    }

    .menu_desk {
        display: block;
        /* Flex */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .logo img {
        height: 25px;
    }

    .menu_desk nav a:not(:last-child) {
        font-size: 1rem;
        margin-left: 1.5rem;
        color: #000;
        text-transform: uppercase;
        transition: 0.3s;
    }

    .menu_desk nav a:hover:not(:last-child),
    .menu_desk nav a:focus:not(:last-child) {
        border-bottom: 2px solid #000;
    }

    .boton_cv {
        margin-left: 2rem;
        font-size: 1rem;
        text-transform: uppercase;
        color: #000;
        border: 1px solid #000;
        background: transparent;
        padding: 7px 15px;
        border-radius: 10px;
        transition: 0.3s;
    }

    .boton_cv:hover,
    .boton_cv:focus {
        background-color: #000;
        color: #fff;
    }
    /* Fin header */

    /* SECCION 1 - Presentacion */
    /* ============================= */
    .s1 {
        height: 100vh;
    }

    .bg-hero img {
        height: 1000px;
        opacity: 0.6;
        animation: hero-img-animation 10s infinite alternate;
    }

    /* Animacion background */
    @keyframes hero-animation {
        0% {
            top: 45%;
            left: 45%;
            transform: translate(-45%, -45%);
        }

        25% {
            top: 55%;
            left: 55%;
            transform: translate(-55%, -55%);
        }

        50% {
            top: 50%;
            left: 60%;
            transform: translate(-50%, -60%);
        }

        100% {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
    @keyframes hero-img-animation {
        0% {
            height: 1000px;
        }

        25% {
            height: 1200px;
        }

        50% {
            height: 1000px;
        }

        100% {
            height: 1200px;
        }
    }
    /* Fin Animacion background */

    .s1 h1 {
        font-size: 95px;
        letter-spacing: -6px;
        line-height: 88px;
        padding-bottom: 20px;
    }

    .s1 h2 {
        font-size: 46px;
        padding-bottom: 25px;
    }

    .sub-nab>a {
        font-size: 1rem;
        border: 1.5px solid #000;
        margin: 0 .5rem;
        padding: .6rem;
        border-radius: 12px;
    }
    /* Fin de la seccion 1 */


    /* SECCION 2 - Conóceme */
    /* ============================= */
    .s2-media {
        flex-direction: row;
    }

    .s2-media .left>img {
        width: 360px;
        padding-right: 40px;
    }

    .s2-media .right p {
        font-size: 1rem;
        line-height: 1.7rem;
    }

    /* SECCION 3 - Portfolio */
    /* ============================= */
    .divisor-portfolio {
        background-size: 100%;
    }

    .divisor-portfolio h2 {
        font-size: 90px;
        line-height: 0.8;
        letter-spacing: -0.2rem;
    }
    /* Fin de seccion 3 */


    /* PORTFOLIO POSTS */
    /* ============================= */
    .hero-portfolio-img {
        padding: 7rem 0 2rem 0;
    }

    .portfolio-post-content p {
        margin-bottom: 1.5rem;
    }

    #embedVideo {
        height: 315px;
        width: 550px;
    }
    /* Fin de portfolio posts */

    /* SECCION 4 - Que ofrezco */
    /* ============================= */
    .offers {
        width: 25%;
        margin-bottom: 25px;
    }
    /* Fin de seccion 4 */

    /* SECCION 5 - Opiniones */
    /* ============================= */
    .opinion {
        width: 32%;
        margin-bottom: 0;
    }
    /* Fin de seccion 5 */
}
/* Fin Media query iPad */


/* ============================= */
/* MEDIA QUERY */
/* MEDIA - HD - 1280px */
/* ============================= */
@media (min-width: 1280px) {
    /* REGLAS RECURSIVAS */
    /* ============================= */
    .card {
        width: 290px;
        height: 200px;
    }

    /* Header */
    /* ============================= */
    header {
        padding: 10px 0;
    }

    .menu_desk nav a {
        margin-left: 20px;
    }
    /* Fin header */

    /* SECCION 6 - Contacto*/
    /* ============================= */
    .s6_left {
        width: 50%;
    }

    .formulario {
        width: 50%;
    }
    /* Fin Seccion 6 */
}
/* Fin Media query HD */