/*####################################################
##													##
## 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;
}

/*** PLACEHOLDER WHATSAPP ***/

.whatsapp-input {
    padding-left: 35px !important;
    background: #FFF url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%2325D366" viewBox="0 0 448 512"><path d="M380.9 97.1C339 55.14 283.6 32 224.5 32 103.5 32 5.3 130.1 5.3 251.2c0 43.7 11.4 86.2 33 123.4L0 480l108.9-37.1c35.2 19.2 74.8 29.2 115.6 29.2h.1c121 0 219.2-98.1 219.2-219.2 0-58.5-23.5-113.9-63.9-155.8zM224.5 438.3c-36.5 0-72.3-9.8-103.5-28.4l-7.4-4.4-64.6 22 21.4-66.6-4.8-6.9c-20.5-29.7-31.3-64.6-31.3-100.8 0-99.6 81-180.6 180.6-180.6 48.3 0 93.8 18.8 128 53 34.3 34.4 53.2 80 53.2 128.5 0 99.6-81 180.6-180.6 180.6zm99.3-134.2c-5.4-2.7-32.1-15.8-37.1-17.6-5-1.9-8.6-2.7-12.3 2.7-3.7 5.3-14.1 17.6-17.3 21.3-3.2 3.7-6.4 4.1-11.8 1.4-5.4-2.7-22.7-8.3-43.2-26.6-15.9-14.2-26.6-31.7-29.8-37-3.2-5.3-.3-8.2 2.4-10.9 2.5-2.5 5.4-6.4 8.1-9.6 2.7-3.2 3.6-5.3 5.4-8.6 1.8-3.2.9-6.4-.5-9.1-1.4-2.7-12.3-29.7-16.9-40.6-4.5-10.8-9.1-9.3-12.3-9.5-3.2-.2-6.9-.3-10.6-.3s-9.6 1.4-14.6 6.9c-5 5.3-19.2 18.8-19.2 45.8 0 27 19.7 53 22.4 56.6 2.7 3.7 38.7 59 93.8 82.8 13.1 5.7 23.3 9.1 31.2 11.6 13.1 4.1 25 3.5 34.4 2.1 10.5-1.6 32.1-13.1 36.6-25.8 4.5-12.7 4.5-23.6 3.2-25.8-1.3-2.1-4.9-3.5-10.3-6.2z"/></svg>') no-repeat 10px center !important;
    background-size: 17px !important;
}

/*** ICONO FLOTANTE DE WHATSAPP ***/

.whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

    .whatsapp-float img {
        width: 30px;
        height: 30px;
        display: block;
    }

/*** 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;
                }

/*** 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 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 img {
            width: 100%;
            height: auto;
            display: block;
        }

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

            #formulario .grid h1.pull-up {
                margin-top: -10px;
            }

            #formulario .grid > div.p-0 {
                padding: 0 !important;
            }

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

                #formulario .grid > div:first-child a {
                    text-decoration: none;
                }

                #formulario .grid > div:first-child img {
                    margin: auto;
                    width: 75%;
                }

                #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 .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;
}