/*####################################################
##													##
## PARRILLACERO5    								##
## 													##
## FRONTEND.CSS		    							##
## 													##
## 													##
## Estilo CSS										##
## Estilos del frontend      					    ##
##													##
##													##
####################################################*/

@charset "utf-8";

/*** BODY ***/

body {
    background-size: cover;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.05rem;
    position: relative;
}

/*** A ***/

a {
    color: #fff;
    text-decoration: none;
    transition: .3s all;
}

    a:hover {
        text-decoration: none;
    }

input[type="checkbox"] {
    cursor: pointer;
}

/*** HR ***/

hr {
    margin: 0;
    border: none;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

/*** ESTILOS DE IMPRESORA ***/

.printable {
    display: none;
}

/*** ESTILOS COMUNES ***/

    /* Botones */

    .btn {
        padding: 10px 35px;
        border: 2px solid #fff;
        border-radius: 25px;
        color: #fff;
        display: inline-block;
        text-transform: uppercase;
        text-decoration: none;
        font-size: .9em;
        transform: .3s all;
    }

        .btn:hover {
            background: #fff;
            color: #000;
        }

    /* Videos width 100% y display block */

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

    /* Video dentro de contenedor */

    .video-boxed {
        width: 100vw;
        height: 100vh;
        object-fit: cover;
    }

    /* Imágenes width 100% y display block */

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

    /* Slider */

    .slider {
        position: relative;
    }

    /* Hide */

    .hide {
        display: none;
    }

    /* Max width global */

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

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

    /* Padding global */

    .padding {
        padding: 35px;
    }

    /* Elementos con visibilidad condicional desktop/mobile */

    .desktop {
        display: initial;
    }

        .desktop.img {
            display: block;
        }

    .mobile {
        display: none;
    }

        .mobile.img {
            display: none;
        }

    /* Estilos para Slick Slider */

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

    .slick-slider .slick-prev:before,
    .slick-slider .slick-next:before {
        font-size: 2rem;
        font-family: 'Font Awesome 5 Pro';
    }

    .slick-slider .slick-prev:before {
        content: '\f053';
    }

    .slick-slider .slick-next:before {
        content: '\f054';
    }

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

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

    .slick-slider .slick-dots {
        bottom: 20px;
    }

    .slick-slider {
        margin-bottom: 0 !important;
    }

    .slick-slider .slick-dots li {
        width: auto;
    }

        .slick-slider .slick-dots li.slick-active button {
            background: var(--blanco);
        }

        .slick-slider .slick-dots li button {
            width: 30px;
            height: 5px;
            padding: 0;
            background: transparent;
            border: 1px solid var(--blanco);
            display: block;
        }

            .slick-slider .slick-dots li button:before {
                content: initial;
            }

    /* 404 */

    #not-found section h1 {
        padding: 25px;
        text-align: center;
        min-height: 300px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    /* Video */

    .video iframe {
        width: 100%;
        height: 480px;
        display: block;
    }

    /* Overlay */

    .overlay {
        background: rgba(0, 0, 0, 0.5);
    }

    /* Overlay isologo */

    .logo-overlay {
        width: 75%;
        max-width: 1024px;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

        .logo-overlay img {
            width: 100%;
            display: block;
        }

    /* Overlay malla/mesh */

    .overlay-mesh {
        width: 100%;
        height: 100vh;
        background-image: url('../../images/mesh.png');
        opacity: .75;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
        filter: alpha(opacity=75);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }

    /* Redes sociales */

    .rrss ul li {
        margin-right: 10px;
        display: inline;
    }

        .rrss ul li:last-child {
            margin-right: 0;
        }

        .rrss a {
            display: inline-block;
        }

        .rrss img {
            height: 32px;
            display: block;
        }

    /* WhatsApp */

    #whatsapp {
        width: 40px;
        height: 40px;
        background: url('../../images/whatsapp-icon.png') no-repeat center;
        background-size: contain;
        display: block;
        position: fixed;
        bottom: 25px;
        right: 25px;
        z-index: 10;
    }

    /* Menú */

    nav.menu ul li {
        background: url('../../images/nav-bg.png') no-repeat scroll right center;
    }

    /* Bloques */

    .block {
        position: relative;
    }

        .block h1 {
            margin-bottom: 25px;
            font-size: 1.1rem;
            font-weight: 500;
            text-transform: uppercase;
            text-align: center;
        }

    /* Divs con efecto parallax */

    .parallax-container {
        position: relative;
        height: 100vh;
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;
    }

/*** LAYOUT ***/

    /** HEADER **/

    header {
        width: 100%;
        padding: 25px;
        color: #fff;
        box-sizing: border-box;
        transition: .3s all;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 11;
    }

    header.header-scroll {
        padding: 10px;
        background: var(--negro);
    }

        header.header-scroll #logo-texto {
            padding-left: 5px;
            color: var(--blanco);
        }

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

            header .grid > div:nth-child(1) a {
                position: relative;
                top: -2px;
            }

            header .grid > div:nth-child(2) {
                text-align: right;
            }

            header .logo {
                width: 100%;
                max-width: 100px;
                display: block;
            }

            header #logo-texto {
                text-transform: uppercase;
                color: var(--blanco);
                font-size: 1.5rem;
                font-weight: 600;
            }

            header .toggle-menu {
                font-size: 1.5em;
                cursor: pointer;
                transition: .3s all;
            }

            header nav ul li {
                display: inline-block;
            }

                header nav ul li a {
                    padding: 5px;
                    display: block;
                    text-transform: uppercase;
                    font-size: .7rem;
                }

            header nav.menu ul li a {
                padding: 5px 25px 5px 15px;
                font-weight: 500;
            }

            header nav.lang ul li a {
                padding: 5px 10px;
            }

                header nav.lang ul li a.active {
                    background: #333;
                }

            header .menu-mobile {
                width: 100%;
                padding: 25px;
                background: var(--negro);
                box-sizing: border-box;
                position: absolute;
                top: 100%;
                left: 0;
            }

            header .menu-mobile .grid {
                grid-template-columns: 1fr auto;
                gap: 25px;
            }

    /** FOOTER **/

    footer {
        padding: var(--padding-global);
        position: initial;
        background: #222;
        text-align: center;
    }

        footer p {
            font-size: .9rem;
        }

        footer p,
        footer a {
            color: #666;
            font-weight: 500;
        }

        footer a,
        footer a:hover {
            text-decoration: underline;
        }

        footer #up {
            padding: 5px 7px;
            background: var(--negro);
            color: var(--blanco);
            display: inline-block;
            text-decoration: none;
            position: absolute;
            bottom: 0px;
            left: 50%;
            transform: translateX(-50%);
        }

/*** MAIN ***/

main {
    position: initial;
}

/*** SECCIONES ***/

    section {
        position: initial;
        background-color: var(--gris-oscuro);
    }

        section a {
            color: #111;
        }

        /* Comunes */

    /** HOME **/

        /* Hero */

        #hero {
            height: 50vh;
            background-size: cover;
            place-items: center;
        }

            #hero img {
                margin: auto;
                max-width: 300px;
                filter: invert(1);
            }

        /* Días y horarios */

        #horarios {
            padding: var(--padding-global);
            color: var(--blanco);
            text-transform: uppercase;
        }

            #horarios h1 {
                font-weight: 500;
            }

            #horarios h3 {
                font-weight: 400;
            }

        /* Vías de contacto */

        #vias-contacto {
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
        }

            #vias-contacto div i {
                margin: auto;
                margin-bottom: 25px;
                color: #444444;
                font-size: 3rem;
                display: block;
            }

            #vias-contacto div span {
                font-weight: 600;
            }

            #vias-contacto p {
                margin-top: 25px;
                font-size: .9rem;
            }

                #vias-contacto div p a {
                    color: var(--blanco);
                }

        /* Buscanos en */

        #buscanos img {
            display: inline-block;
            filter: invert(1);
        }

        #buscanos .redes-sociales a:not(:last-child) img {
            margin-right: 5px;
        }

        /* Ubicación */

        #ubicacion {
            padding: var(--padding-global);
            padding-top: 0;
            color: var(--blanco);
            text-transform: uppercase;
        }

            #ubicacion .grid {
                grid-template-columns: 1.5fr 1fr;
                gap: 25px;
            }

            #ubicacion iframe {
                height: calc(100% - 46px);
            }

        /* Contacto */

            #contacto p,
            #contacto a,
            #contacto label,
            #contacto input,
            #contacto select,
            #contacto textarea,
            #contacto button {
                color: var(--blanco);
                font-size: .9rem;
            }

            #contacto .red {
                font-size: 1.5rem;
                vertical-align: middle;
                line-height: 1rem;
            }

            #contacto .grid {
                grid-template-columns: 1fr 1fr;
                gap: 25px;
            }

                #contacto .grid > div:first-child ul {
                    margin-bottom: 15px;
                }

                    #contacto .grid > div:first-child ul li {
                        padding: 10px 0;
                    }

                #contacto label {
                    margin-bottom: 15px;
                    font-weight: 300;
                    display: block;
                }

                    #contacto input,
                    #contacto select,
                    #contacto textarea,
                    #contacto button {
                        width: 100%;
                        margin-top: 5px;
                        padding: 10px;
                        background: transparent;
                        border: 1px solid var(--blanco);
                        font-family: 'Montserrat', sans-serif;
                        box-sizing: border-box;
                        display: block;
                        transition: .4s all;
                        outline: none;
                    }

                    #contacto input:disabled,
                    #contacto select:disabled,
                    #contacto textarea:disabled,
                    #contacto button:disabled {
                        opacity: .5;
                    }

                    #contacto input:focus,
                    #contacto textarea:focus,
                    #contacto select:focus {
                        background: rgba(255, 255, 255, 0.1);
                    }

                    #contacto button {
                        width: 100px;
                        cursor: pointer;
                        transition: .4s all;
                    }

                        #contacto button:hover {
                            background: var(--blanco);
                            color: var(--negro);
                        }

                        #contacto button:disabled {
                            background: initial;
                            color: var(--blanco);
                            cursor: default;
                        }

                    #contacto select {
                        padding: 12px 10px;
                    }

                        #contacto select option {
                            color: var(--negro);
                        }

                    #contacto textarea {
                        resize: vertical;
                    }

        /* Mapa */

        #mapa {
            padding: 0;
        }

            #mapa span {
                padding: 25px;
                color: var(--blanco);
                background: #222;
                text-align: center;
                font-size: 1.5rem;
                font-weight: 300;
                letter-spacing: 0.05rem;
                text-transform: uppercase;
                display: block;
                cursor: pointer;
            }

        #mapa iframe {
            display: block;
        }

    /*** CARTA ***/

    #carta #menu-platos {
        padding: 35px;
        background-size: cover;
        background-attachment: fixed;
        color: var(--blanco);
        font-family: 'Baskervville', serif;
    }

        #carta #menu-platos .no-items {
            min-height: 35vh;
            display: grid;
            place-content: center;
            position: relative;
            z-index: 1;
        }

        #carta #menu-platos .overlay {
            display: block;
            position: absolute;
            z-index: 0;
        }

        #carta #menu-platos #platos fieldset:not(:last-child) {
            margin-bottom: 45px;
        }

        #carta #menu-platos #platos fieldset {
            padding: 35px;
            border: 3px solid;
            border-color: rgba(255, 255, 255, 0.5);
            position: relative;
            z-index: 1;
        }

            #carta #menu-platos #platos fieldset legend {
                padding: 0 45px;
            }

        #carta #menu-platos #platos fieldset .plato:not(:last-child) {
            margin-bottom: 35px;
        }

        #carta #menu-platos #platos fieldset .plato {
            grid-template-columns: 100px 1fr;
            gap: 25px;
        }

            #carta #menu-platos #platos fieldset .plato .round-image {
                height: 100px;
                width: 100px;
            }

        .platos__categorias {
            font-size: 1.8rem;
        }

            .plato__nombre,
            .plato__variantes {
                font-size: 1.3rem;
            }

            .plato__nombre {
                font-weight: 600;
            }

            .plato__variantes {
                margin-top: 10px;
                margin-left: 15px;
            }

                .plato__variantes ul li {
                    display: flex;
                }

                    .plato__variantes ul li .first {
                        margin-right: 10px;
                    }

                    .plato__variantes ul li .dotted-line {
                        margin-right: 10px;
                        border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
                        flex-grow: 1;
                        position: relative;
                        top: -5px;
                    }

/*** RESOLUCIÓN INCOMPATIBLE **/

#incompatible {
    display: none;
}

/*** KEYFRAMES ***/

@keyframes expandirLinea {
    0% {
        width: 0;
    }

    100% {
        width: calc(100% - 70px);
    }
}

/*** BREAKPOINTS VERTICALES ***/

@media screen and (max-height: 768px) {
    #hero {
        height: 70vh;
        background-size: cover;
        place-items: center;
    }
}