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

@charset "utf-8";

/*** ESTILOS COMUNES ***/

.desktop {
    display: block;
}

.mobile {
    display: none;
}

.img {
    width: 100%;
    display: block;
}

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

.p-0 {
    padding: 0;
}

/*** FUENTES ***/

@font-face {
    font-family: 'Unbounded';
    src: url('../fonts/Unbounded-Regular.woff2') format('woff2'),
        url('../fonts/Unbounded-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*** NAV ***/

nav {
    padding: 45px 35px;
    background: var(--color-blanco);
}

    nav ul li {
        display: inline-block;
    }

    nav ul li:not(:last-child) {
        margin-right: 25px;
    }

        nav ul li a {
            display: block;
            color: var(--color-gris-v2);
            font-size: 1.1rem;
            font-weight: 600;
            letter-spacing: 0.05rem;
            text-decoration: none;
            text-transform: uppercase;
        }

            nav ul li a:hover {
                color: var(--color-gris-v3);
                text-decoration: inherit;
            }

/*** HEADER ***/

header {
    padding: 35px;
    background: var(--color-gris-v2);
    background-size: cover;
}

    header .grid {
        grid-template-columns: .5fr 1fr;
        gap: 25px;
        align-items: center;
    }

/*** SECCIONES ***/

    section h1 {
        font-family: 'Unbounded';
    }

    /** INICIO **/

        /* Quiénes somos */

        #quienes-somos {
            background: var(--color-blanco);
        }

            #quienes-somos h1 {
                margin: auto;
                max-width: 1280px;
                padding: 25px;
                font-size: 1.5rem;
                font-weight: 400;
            }

                #quienes-somos h1:not(.orange) {
                    color: var(--color-gris-v2);
                }

                #quienes-somos h1 .orange {
                    font-weight: 700;
                }

        /* Industrias */

        #industrias {
            position: relative;
        }

        /* Socios comerciales */

        #socios-comerciales {
            padding: 35px 0;
            background: var(--color-gris-v2);
        }

            #socios-comerciales .slider img {
                margin: 0 10px;
                max-height: 200px;
                display: block;
            }

        /* Contacto (formulario) */

        #formulario h1 {
            color: var(--color-gris-v2);
        }

        #formulario form.grid {
            grid-template-rows: 1fr auto;
            gap: 25px;
        }

            #formulario > .grid {
                max-width: 1280px;
                grid-template-columns: .7fr 1fr;
            }

            #formulario .grid > div:first-child {
                padding: 45px;
            }

            #formulario form.grid > div {
                margin-bottom: 0;
                padding: 0 !important;
            }

            #formulario form.grid > div input {
                width: 100%;
                padding: 20px;
                margin-bottom: 25px;
                border-radius: 35px;
                border: none;
            }

            #formulario form.grid > div button {
                padding: 20px;
            }

            #formulario .block p:first-child {
                color: var(--color-naranja);
                font-weight: 800;
            }

            #formulario .block p:last-child {
                color: var(--color-gris-v3);
            }

        /* Nuestros clientes */

        #nuestros-clientes {
            padding: 35px 0;
        }

            #nuestros-clientes .slider img {
                margin: 0 25px;
                max-height: 200px;
                display: block;
            }

        /* Contacto (footer) */

        #contacto {
            background: var(--color-gris-v2);
        }

            #contacto h1 {
                margin-bottom: 35px;
            }

            #contacto p,
            #contacto a {
                font-size: 1.8rem;
                font-weight: 300;
                color: var(--color-blanco);
            }

                #contacto a:hover {
                    text-decoration: none;
                }

            #contacto p {
                line-height: 2.3rem;
            }

            /*** WIDGET RECAPTCHA ***/

            .g-recaptcha > div {
                margin: auto;
            }

@media screen and (max-width: 640px) {
    /*** ESTILOS COMUNES ***/

    .desktop {
        display: none;
    }

    .mobile {
        display: block;
    }

    /*** MENÚ ***/

    nav {
        padding: 25px;
        text-align: center;
    }

        nav ul li:not(:last-child) {
            margin-right: 0;
        }

        nav ul li {
            display: block;
        }

            nav ul li a {
                font-size: .8rem;
            }

    /*** QUIÉNES SOMOS ***/

    #quienes-somos h1 {
        font-size: 1.2rem;
    }

    /*** FORMULARIO ***/

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

    /*** CONTACTO ***/

    #contacto p, #contacto a {
        font-size: 1.2rem;
    }

    /*** WIDGET RECAPTCHA ***/

    .g-recaptcha {
        margin: auto;
        transform: scale(0.75);
        transform-origin: 0 0;
        position: relative;
        left: -15px;
    }

        .g-recaptcha > div {
            margin: auto;
            width: 200px !important;
        }
}