/*####################################################
##													##
## FDF										    ##
## 													##
## CUSTOM.CSS										##
## 													##
## 													##
## Estilo CSS										##
## Estilos globales para el frontend				##
## Estilo personalizados para este sitio    		##
##													##
####################################################*/

@charset "utf-8";

/*** BODY ***/

body {
    background: #4D4D4D;
    color: #FFF;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    letter-spacing: initial;
}

/*** A ***/

a {
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

/*** COLORES ***/

.green {
    color: #45B062;
}

.orange {
    color: #FA831B;
}

/*** COLORES DE FONDO ***/

.white-bg {
    background-color: #FFF;
}

.orange-bg {
    background-color: #FA831B;
    background: url('../imgs/bg-02.jpg') no-repeat center center;
}

.gray-v1-bg {
    background-color: #4D4D4D;
}

.gray-v2-bg {
    background-color: #E5E5E5;
}

/*** PATTERNS ***/

.pattern-bg {
    background: url('../imgs/pattern-1.jpg') no-repeat center center;
}

/*** POSICIONAMIENTOS ***/

.absolute {
    position: absolute;
    top: 0;
    left: 0;
}

/*** ELEMENTO VIDEO ***/

video {
    width: 100%;
    display: block;
}

/*** MÁRGENES ***/

.m-auto {
    margin: auto;
}

.mb-1 {
    margin-bottom: 1em;
}

.mt-15 {
    margin-top: 15px;
}

/*** ANCHOS ***/

.max-1024 {
    max-width: 1024px;
}

.max-800 {
    max-width: 800px;
}

/*** TEXTOS ***/

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

/*** GRID ***/

.grid {
    display: grid;
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

/*** TEXTOS ***/

.bold {
    font-weight: bold;
}

/*** HEADER ***/

header {
    padding: 80px 25px;
    background: url('../imgs/header-1.jpg') no-repeat center center;
    background-size: cover;
}

    /* Menú */

    header nav {
        margin: auto;
        margin-bottom: 65px;
        display: block;
    }

        header nav ul li {
            padding-right: 35px;
            display: inline-block;
        }

            header nav ul li a {
                color: #fff;
                font-family: 'Montserrat', sans-serif;
                text-transform: uppercase;
                font-size: 1.3em;
                font-weight: 500;
            }

                header nav ul li a:hover {
                    color: #999;
                }

    /* Debajo del menú */

    header > div {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }

        header > div img {
            display: block;
        }

        header > div div:last-child img {
            width: 100%;
        }

        header > div h1 {
            margin-top: 35px;
            font-size: 2.5em;
        }

        header .line {
            margin: 25px auto;
            width: 50px;
        }

        header > div h5 {
            font-size: 1.4em;
            font-weight: 500;
        }

            header > div h5 br {
                display: none;
            }

        /* Slider del header */

        header #slider-header {
            margin-bottom: 0;
            width: 480px;
            height: 457px;
            overflow: hidden;
            border-radius: 25px;
            box-shadow: 25px 25px 1px #FA831B;
        }

            header #slider-header img {
                width: 100%;
                height: 100%;
                display: block;
            }

            header #slider-header .slick-dots {
                bottom: 15px;
            }

                header #slider-header .slick-dots li button:before {
                    font-size: 12px;
                }

/*** FOOTER ***/

footer {

}

/*** ESTILOS COMUNES ***/

    /* Headings de sección */

    section h1 {
        font-size: 3em;
        font-weight: 700;
        font-family: 'Montserrat', sans-serif;
    }

    /* Padding de sección */

    section > div {
        padding: 80px 0;
    }

    /* Botón genérico */

    .btn {
        padding: 15px 25px;
        background: #111;
        color: #fff;
        border: none;
        border-radius: 25px;
        text-decoration: none;
        text-transform: uppercase;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 1.5em;
        display: block;
        cursor: pointer;
        transition: .3s all;
    }

        .btn:hover {
            background: #222;
            text-decoration: none;
        }

        .btn:disabled {
            background: #666;
            cursor: default;
        }

        .btn-big {
            padding: 25px 35px;
            font-size: 1.8em;
            border-radius: 45px;
        }

    /* Overlay */

    .overlay {
        width: 100%;
        height: 100%;
        display: none;
        position: absolute;
        top: 0;
        left: 0;
    }

    /* Iconos */

    .icon {
        width: 40px;
        height: 40px;
        display: inline-block;
        vertical-align: middle;
    }

        .icon.instagram {
            background: url('../imgs/instagram-icon.webp') no-repeat center;
            background-size: contain;
        }

        .icon.whatsapp {
            background: url('../imgs/whatsapp-icon.webp') no-repeat center;
            background-size: 130%;
        }

    /* Padding genérico */

    .padding {
        padding: 25px;
    }

    /* Slick Slider */

    .slider .slick-prev,
    .slider .slick-next {
        z-index: 1;
    }

        .slider .slick-prev {
            left: 15px;
        }

        .slider .slick-next {
            right: 15px;
        }

    /** Mensajes de error **/

    .error,
    .info,
    .success,
    .warning {
        padding: 15px;
        background: rgba(255, 255, 255, 0.9);
        color: #111;
    }

        .error {
            border-top: 3px solid #E74C3C;
        }

        .success {
            border-top: 3px solid #52BE80;
        }

    /* Fuente Montserrat */

    .montserrat {
        font-family: 'Montserrat', sans-serif;
    }

    /* Fuente Lato */

    .lato {
        font-family: 'Lato', sans-serif;
    }

    /* Círculo para imágenes */

    .img-circle {
        margin: auto;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        overflow: hidden;
        box-shadow: 25px 25px 1px #FA831B;
    }

        .img-circle img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }

    /* Línea genérica */

    .line {
        width: 100%;
        height: 4px;
        background-color: #FA831B;
        display: inline-block;
    }

/*** SECCIONES ***/

    /** INICIO **/

        /* Quiénes somos */

        #quienes-somos {
            position: relative;
            overflow: hidden;
        }

            #quienes-somos img {
                width: 100%;
                height: 100%;
            }

            #quienes-somos > .grid-3 {
                gap: 50px;
                position: relative;
                z-index: 2;
            }

                #quienes-somos .img-circle {
                    width: 250px;
                    height: 250px;
                    display: block;
                    box-shadow: 25px 25px 1px #4D4D4D;
                }

            #quienes-somos p {
                margin-bottom: 15px;
                font-size: 1.4em;
                color: #111;
            }

            #quienes-somos__info .grid {
                grid-template-columns: 1fr 70px;
                gap: 15px;
            }

                #quienes-somos__info .grid img {
                    width: 100%;
                    display: block;
                }

            #quienes-somos .absolute {
                width: 100%;
                height: 100%;
                opacity: .8;
                z-index: 1;
            }

        /* Próximo negocio */

        #proximo-negocio {

        }

            #proximo-negocio img {
                width: 100%;
                height: 100%;
                display: block;
            }

        /* Formulario */

        #formulario h2 {
            margin-bottom: 25px;
            color: #FA831B;
            font-size: 2em;
            font-weight: 800;
        }

        #formulario p {
            margin-bottom: 25px;
            font-size: 1.5em;
            line-height: 1.2em;
            color: #222;
        }

        #formulario > .grid {
            gap: 35px;
        }

            #formulario .grid > div:first-child {
                padding: 25px;
                border-radius: 25px;
            }

                #formulario input,
                #formulario select,
                #formulario textarea {
                    width: 100%;
                    padding: 15px;
                    background: #FFF;
                    border-radius: 15px;
                    border: 1px solid #aaa;
                    box-sizing: border-box;
                    font-family: 'Lato', sans-serif;
                }

                #formulario textarea {
                    resize: vertical;
                }

                #formulario button {
                    width: 100%;
                }

                #formulario form div {
                    margin-bottom: 15px;
                }

                #formulario form div.grid {
                    gap: 15px;
                }

        /* Beneficios */

        #beneficios .grid {
            margin-top: 45px;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 50px;
            text-align: center;
        }

            #beneficios .grid img {
                margin: auto;
                max-width: 100%;
                width: 40%;
                display: block;
            }

            #beneficios .grid p {
                margin-top: 35px;
                color: #222;
                font-size: 1.5em;
                font-weight: 600;
            }

        /* Galería */

        #galeria #slider-galeria {
            
        }

            #galeria #slider-galeria .slide {
                margin: 0 15px;
                width: 640px;
                height: 480px;
                overflow: hidden;
            }

            #galeria #slider-galeria .slide img {
                width: 100%;
                height: 100%;
                display: block;
                object-fit: cover;
            }

            #galeria #slider-galeria .slick-dots {
                bottom: -45px;
            }

                #galeria #slider-galeria .slick-dots li button:before {
                    font-size: 12px;
                }

        #galeria h1 {
            margin-bottom: 45px;
        }

        /* Más información */

        #mas-informacion .btn {
            max-width: 600px;
            margin: 45px auto;
        }

        #mas-informacion h5 {
            color: #111;
            font-size: 1.5em;
        }

/*** EN CONSTRUCCIÓN ***/

.under-construction section {
    height: calc(100vh - 310px);
    padding: 45px;
    background: url('../imgs/construction.jpg') no-repeat center;
    background-size: cover;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .under-construction section h1 {
        margin-bottom: 25px;
    }

/*** MENSAJE DE INCOMPATIBILIDAD DE PANTALLA ***/

#incompatible {
    display: none;
}