/*####################################################
##													##
## ASDRA     										##
## 													##
## CUSTOM.CSS		        						##
## 													##
## 													##
## Estilo CSS										##
## Estilos específicos del sitio 					##
##													##
##													##
####################################################*/

@charset "utf-8";

/*** BODY ***/

body {
    font-family: 'Muli', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    font-size: 12pt;
    background: #fff;
    color: #000;
}

/*** FUENTES ***/

@font-face {
	font-family: 'FontAwesome';
	src: url('../fonts/font-awesome/font/fontawesome-webfont.eot?v=3.2.1');
	src: url('../fonts/font-awesome/font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../fonts/font-awesome/font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('fonts/font-awesome/font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../fonts/font-awesome/font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
	font-weight: normal;
	font-style: normal;
}

/*** COLORES ***/


/*** ESTILOS COMUNES ***/

    /* Párrafos */

    p {
        margin-bottom: 15px;
        font-size: 12pt;
        line-height: 1.5em;
        text-align: justify;
    }

    /* Botón genérico del frontend */

    .btn {
        font-size: 1.2em;
        color: #fff;
        padding: 10px 15px;
        display: inline-block;
        border: none;
        background-color: #8bd121;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(1, 1, 1, 0.15);
        transition: all 0.3s ease-in-out;
        cursor: pointer;
    }

        .btn:hover {
            background-color: #77b31d;
            color: #fff;
        }

    .btn-mini {
        padding: 5px 10px;
    }

    /* Overlay */

    .body-overlay {
        position: fixed;
    }

    /* Breadcrumb */

    .breadcrumb a {
        color: #01a049;
    }

/*** LAYOUT ***/

    .top-area {
        padding: 25px;
    }

    .top-area-sticky {
        position: sticky;
        top: 0;
        background: rgba(255, 255, 255,0.95);
        backdrop-filter: saturate(180%) blur(10px);
        -webkit-backdrop-filter: saturate(180%) blur(10px);
        z-index: 2;
    }

    .bottom-area {
        margin: auto;
        max-width: 1024px;
        padding: 25px;
    }

    #inicio .bottom-area {
        height: 100%;
    }

    /* Slider */

    .slider {
        overflow: hidden;
    }

    #slider img,
    .slider img {
        width: 100%;
        display: block;
    }

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

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

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

    #slider .slick-dots,
    .slider .slick-dots {
        bottom: 25px;
    }

    #slider .slick-prev,
    #slider .slick-next,
    .slider .slick-prev,
    .slider .slick-next {
        transform: scale(1);
        -webkit-transform: scale(1);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

        #slider .slick-prev::before,
        #slider .slick-next::before,
        .slider .slick-prev::before,
        .slider .slick-next::before {
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.5);
            font-family: 'Font Awesome 5 Pro';
            font-weight: 400;
        }

            #slider .slick-prev::before,
            .slider .slick-prev::before {
                padding: 5px 14px 5px 12px;
                content: "\f053";
            }

            #slider .slick-next::before,
            .slider .slick-next::before {
                padding: 5px 12px 5px 14px;
                content: "\f054";
            }

    /* Área del navbar */

        /* Selector de idioma */

        #idioma {

        }

            #idioma a {
                width: 25px;
                padding: 5px;
                background: #fff;
                border-radius: 50%;
                font-size: 0.8em;
                text-align: center;
                display: inline-block;
            }

            #idioma a:not(:last-child) {
                margin-right: 5px;
            }

            #idioma a.active {
                background: #eee;
            }

    /* Navegación */

    #navegacion {
        margin-bottom: 25px;
    }

        #navegacion,
        #navegacion a {
            color: #2F59A5;
            font-weight: bold;
        }

    /* Metadatos como epígrafes */

    #post__grid h5,
    .entry .slide h5 {
        margin: auto;
        max-width: 1024px;
        margin-top: 15px;
        font-weight: 300;
        display: block;
        text-align: center;
    }

        #post__grid h5 .pull-left,
        .entry .slide h5 .pull-left {
            margin-left: -5px;
        }

    .grid.list.slide h5 {
        text-align: left;
    }

    /* Navegador de elementos */

    #navegador {
        text-align: right;
    }

    /* Mecenazgo */

    .mecenazgo-logo {
        width: 150px;
        height: 40px;
        background: url('../imgs/mecenazgo_logo.png') no-repeat center;
        background-size: contain;
        display: inline-block;
    }

    /* Asdra */

    .asdra-logo {
        width: 110px;
        height: 40px;
        background: url('../imgs/asdra_logo-v1.jpg') no-repeat center;
        background-size: contain;
        display: inline-block;
    }

/*** HEADER ***/

/*** NAVBAR ***/

#navbar {
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 25px;
}

    #navbar .logo {
        max-width: 220px;
    }

    #navbar div:last-child {
        text-align: right;
        position: relative;
        top: 1px;
    }

    #navbar .menu-mobile {
        display: none;
    }

    #navbar nav {
        text-align: right;
        position: relative;
    }

        #navbar nav ul {
            list-style: none;
        }

            #navbar nav ul li {
                margin-bottom: 0;
                display: inline;
                position: relative;
            }

                #navbar nav ul li {
                    padding: 0 15px;
                }

                    #navbar nav ul li a {
                        font-size: 1em;
                        font-weight: normal;
                        display: inline-block;
                        position: relative;
                        z-index: 10001;
                    }

                    #navbar nav > ul > li > a.active {
                        border-bottom: 2px solid #77b31d;
                    }

                    #navbar nav ul li:not(:nth-child(2)) a {
                        text-transform: uppercase;
                    }

                #navbar nav ul li ul,
                #navbar nav ul li ul li ul {
                    padding-top: 40px;
                    background: #fff;
                    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
                    display: none;
                    position: absolute;
                    top: -50%;
                    left: 0;
                    right: 0;
                    z-index: 1000;
                }

                    #navbar nav ul li ul li {
                        display: block;
                        text-align: left;
                    }

                        #navbar nav ul li ul li.active {
                            background: #eee;
                        }

                        #navbar nav ul li ul li a {
                            padding: 10px 15px;
                            display: inherit;
                            word-break: break-all;
                            text-transform: uppercase;
                        }

                            #navbar nav ul li ul li a span:before {
                                content: '';
                            }

                            #navbar nav ul li ul li a:hover,
                            #navbar nav ul li ul li:hover {
                                background: #f1f1f1 !important;
                            }

                        #navbar nav ul li ul li ul {
                            padding-top: 0;
                            display: none;
                            right: initial;
                            top: 1%;
                            left: 100%;
                        }

                    #navbar nav ul li:hover > ul {
                        display: block;
                    }

                        #navbar nav ul li:hover > ul li:hover > ul {
                            display: block;
                        }

    #navbar .social,
    #navbar #idioma {
        display: inline-block;
    }

    #navbar .social a {
        margin-left: 15px;
    }

        #navbar .social a:hover {
            color: #CE0000;
        }

    #navbar #idioma {
        margin-left: 15px;
    }

/*** FOOTER ***/

footer {
    padding: 25px;
    text-align: right;
}

    footer > .grid {
        padding-top: 25px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
        align-items: center;
    }

        #footer__texto {
            text-align: left;
        }

        #footer__redes {
            text-align: center;
        }

            #footer__redes .social {
                padding-bottom: 15px;
            }

                #footer__redes .social a {
                    font-size: 2em;
                }

                #footer__redes .social img {
                    width: 40px;
                    display: inline-block;
                    vertical-align: bottom;
                }

        #footer__logos .asdra-logo {
            margin-right: 25px;
        }

/*** MAIN ***/

    /* Slider */

    .slide-container-info {
        color: #fff;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 85%;
        left: 5%;
        transform: translateY(-85%);
    }

        .slide-container-info h1 {
            font-size: 1.5em;
        }

        .slide-container-info h3 {
            font-size: 1.1em;
        }

    .slick-dotted.slick-slider {
        margin-bottom: 0;
    }

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

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

    .slider .slick-arrow {
        opacity: 0;
        transition: .5s all;
    }

    .slider:hover .slick-arrow {
        opacity: 1;
    }

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

    .slider:hover .slick-next {
        right: 45px;
    }

    /* Elementos en grilla */

    #lista-elementos {
        grid-template-columns: repeat(4, 200px);
        justify-content: center;
        gap: 20px;
    }

        #lista-elementos .elemento {
            width: 200px;
            height: 230px;
            padding: 25px;
            background: #FFF;
            border: 1px solid #111;
        }

            #lista-elementos .elemento img {
                width: 150px;
                height: 150px;
                display: block;
                object-fit: contain;
            }

            #lista-elementos .elemento p {
                text-align: center;
                font-weight: bold;
                position: relative;
                top: 15px;
            }

    /* Elementos para slider */

    #contenedor-elementos {
        margin: auto;
        max-width: 700px;
        position: relative;
    }

        #slider-elementos {
            max-width: 800px;
            padding: 50px 70px;
            background: #FAFAFA;
        }

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

        #contenedor-elementos #datos-elemento {
            margin-top: 35px;
            grid-template-columns: 1fr auto;
            gap: 25px;
        }

            #contenedor-elementos #datos-elemento h5 {
                text-transform: uppercase;
            }

            #contenedor-elementos #datos-elemento button {
                background: none;
                border: none;
                cursor: pointer;
            }

            #contenedor-elementos #datos-elemento a:hover {
                text-decoration: underline;
            }

    /* Fotografías */

    .fotografias {
        margin: auto;
        max-width: 800px;
    }

    /* H1 de secciones */

    .bottom-area h1 {
        margin-bottom: 25px;
        text-transform: uppercase;
        font-size: 1.2em;
    }

    /* iframes */

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

/*** SECCIONES ***/

    /** SPLASH SCREEN **/

    #splash {
        width: 100%;
        height: 100vh;
        background: #fff;
        background-size: contain;
        display: grid;
        align-items: center;
        text-align: center;
    }

        #splash img {
            margin: auto;
            margin-bottom: 35px;
            max-width: 50vh;
            display: block;
        }

        #splash a {
            color: #111;
            font-size: 2em;
            text-transform: uppercase;
        }

            #splash #ingresar-home {
                transition: 0.3s all;
            }

        #splash .copyright {
            color: #333;
        }

    /** INICIO **/

    #inicio {

    }

        #inicio img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }

        #inicio__top {
            grid-template-columns: 1.2fr 1fr;
            gap: 25px;
        }

        #inicio__bottom {
            margin-top: 65px;
            text-align: center;
            grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
            gap: 25px;
        }

            #inicio__bottom > div > div {
                max-height: 200px;
                overflow: hidden;
            }

            #inicio__bottom .btn {
                margin-top: 25px;
            }

    /** ACERCA DE ASDRA **/

        /* Objetivos */

        #objetivos .bottom-area .grid {
            grid-template-columns: 1fr 1fr;
            gap: 25px;
        }

        /* Proyecto */

        #proyecto {

        }

            #proyecto__lista > .grid {
                grid-template-columns: 1fr 1fr;
                gap: 35px;
            }

                #proyecto__lista .proyecto:not(:last-child) {
                    margin-bottom: 55px;
                }

                #proyecto__lista .proyecto h1 {

                }

        /* Equipo */

        #equipo {

        }

            #equipo__lista {
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                gap: 45px;
            }

                #equipo__lista .equipo__imagen {
                    margin: auto;
                    width: 300px;
                    height: 300px;
                    overflow: hidden;
                    border-radius: 50%;
                }

                    #equipo__lista .equipo__imagen img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }

                #equipo__lista .equipo__botones {
                    margin: 25px auto;
                    text-align: center;
                }

                #equipo__lista .equipo__texto {
                    text-align: justify;
                }

    /** TALLERES **/

    #talleres {

    }

        #talleres__lista .taller:not(:last-child) {
            margin-bottom: 35px;
        }

        #talleres__lista .taller {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 25px;
        }

            #talleres__lista .taller > div:last-child {
                padding-top: 58px;
            }

    /** MUESTRAS **/

    #muestras {

    }

        #muestras__lista {
            text-align: center;
            grid-template-columns: repeat(auto-fit, minmax(415px, 1fr));
            gap: 45px;
        }

            .muestra__imagen {
                height: 350px;
                overflow: hidden;
            }

                .muestra__imagen img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

            .muestra__info .btn {
                margin-top: 25px;
            }

        #muestra__contenido {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 25px;
        }

            #muestra__contenido h1,
            #muestra__contenido h2,
            #muestra__contenido h3,
            #muestra__contenido h4,
            #muestra__contenido h5,
            #muestra__contenido h6 {
                margin-bottom: 15px;
            }

        .muestra__individual {
            margin-bottom: 35px;
            gap: 25px;
        }

        .muestra__individual.par {
            grid-template-columns: 1fr 0.7fr;
            text-align: right;
        }

        .muestra__individual.impar {
            grid-template-columns: 0.7fr 1fr;
            text-align: left;
        }

        .muestra__individual.par > div:first-child {
            order: 2;
        }

        .muestra__individual.par > div:last-child {
            order: 1;
        }

    /** TRABAJOS **/

    #trabajo__banner-video {
        margin-bottom: 25px;
    }

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

    #trabajo__entradas {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 25px;
    }

    #trabajo__galerias {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
        gap: 25px;
    }

        #trabajo__galerias .unica iframe {
            height: 640px;
        }

        #trabajo__galerias h3 {
            margin-top: 15px;
            color: #e1913a;
            text-transform: uppercase;
            text-align: center;
            font-weight: 100;
            font-size: 1.4em;
        }

        #trabajo__galerias .div-audio audio {
            width: 100%;
        }

    /** CATÁLOGO **/

    #catalogo {

    }

        #catalogo__detalle {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 25px;
        }

    /** GALERÍAS **/

    .galeria__imagenes {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 25px;
    }

        .galeria__imagenes > div {
            height: 300px;
            overflow: hidden;
            transition: .3s all;
        }

            .galeria__imagenes > div:hover {
                opacity: .5;
            }

            .galeria__imagenes > div img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

    /** PRENSA **/

    #prensa__lista {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 25px;
    }

    #prensa__lista small {
        display: block;
    }

    #prensa__lista h5 {
        padding-right: 15px;
        display: inline;
    }

    #prensa__lista iframe {
        margin: 25px auto 0;
        max-width: 720px;
        height: 480px;
        display: block;
    }

    /** CONTACTO **/

    #contacto {

    }

        #contacto__contenedor {
            grid-template-columns: 1fr 1fr;
            gap: 45px;
        }

            #contacto__contenedor form {

            }

                #contacto__contenedor form label {
                    margin-bottom: 25px;
                    display: block;
                }

                    #contacto__contenedor form label input,
                    #contacto__contenedor form label textarea {
                        width: 100%;
                        display: block;
                        box-sizing: border-box;
                    }

                    #contacto__contenedor form label textarea,
                    #contacto__contenedor form label textarea::placeholder {
                        font-family: 'Muli', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
                    }

        #contacto__contenedor .social a {
            font-size: 1em;
        }

        #contacto__contenedor .social a:first-child,
        #contacto__contenedor .social a:last-child {
            display: none;
        }

/* PRECARGA DE IMÁGENES */

.precarga {
    width: 100%;
    height: 100%;
    -webkit-filter: blur(30px);
    filter: blur(30px);
    position: absolute;
    left: 0;
    top: 0;
}

.completa {
    opacity: 0;
}