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

@charset "utf-8";

/*** BODY ***/

html {
    overflow-y: hidden;
}

body {
    font-family: 'DIN Pro Regular';
    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 ***/

.button {
    font-family: 'DIN Pro';
}

.body-overlay {
    position: fixed;
}

main {
    
}

    .global {
        overflow-x: hidden;
    }

        .global > div:not(.slider-area) {
            padding: 25px;
        }

            .global .top-area {
                
            }

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

            .global .bottom-area {
                height: calc(100vh - 78px);
            }

    /* Slider */

    #slider img {
        width: 100%;
    }

    #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(3);
        -webkit-transform: scale(3);
        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 {
            font-family: 'Font Awesome 5 Pro';
            font-weight: 400;
        }

            #slider .slick-prev::before,
            .slider .slick-prev::before {
                content: "\f053";
            }

            #slider .slick-next::before,
            .slider .slick-next::before {
                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;
    }

/*** HEADER ***/

/*** NAVBAR ***/

#navbar {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 25px;
}

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

    #navbar div:last-child {
        text-align: right;
    }

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

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

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

            #navbar nav ul li {
                display: inline;
                position: relative;
            }

                #navbar nav ul li a {
                    padding: 0 25px;
                    font-family: 'DIN Pro Regular';
                    position: relative;
                    z-index: 10001;
                }

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

                    #navbar nav ul li a span i {
                        padding-left: 10px;
                    }

                #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 a {
                            padding: 10px 15px;
                            display: inherit;
                            font-family: 'DIN Pro Medium';
                            word-break: break-all;
                        }

                            #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 {
                            width: 135%;
                            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;
                        }

/*** FOOTER ***/

/*** MAIN ***/

    /* Slider */

    .slide-container-info {
        color: #fff;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        font-family: 'DIN Pro Light';
        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;
    }

    /**/

/*** 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 (punto de entrada) */
    /* Entradas */

    #inicio .page h1,
    #entradas .page h1 {
        margin-bottom: 25px;
        padding-bottom: 25px;
        border-bottom: 1px dotted #eee;
    }

    #inicio .page p:not(:last-child),
    #entradas .page p:not(:last-child) {
        margin-bottom: 20px;
    }

    /* Entradas */

        #lista-entradas h1 {
            font-size: 1.5em;
        }

        #lista-entradas .entry:not(:last-child) {
            margin-bottom: 25px;
        }

        /* Slider de entradas */

        #lista-entradas.slider {
            margin: auto;
            height: 500px;
        }

        .entry .slide,
        .post-slider {
            margin-bottom: 100px;
            width: 100%;
            object-fit: cover;
            position: relative;
        }
        
            .entry .slide img,
            .post-slider img {
                margin: auto;
                width: auto;
                max-height: 500px;
                display: block;
            }

            .entry .slide h1.title {
                font-size: 1.5em;
                position: absolute;
                left: 50px;
                bottom: -80px;
            }

        /* Listas de entradas */

        .entry .grid.list {
            grid-template-columns: 350px 1fr;
            gap: 25px;
        }

            .entry .grid.list img {
                width: 100%;
                display: block;
            }

            .entry .grid.list.slide img {
                margin: 0;
                width: auto;
                max-height: 500px;
                display: block;
            }

        #lista-entradas.grid.press {
            grid-template-columns: repeat(auto-fit, minmax(640px, 1fr));
            gap: 25px;
        }

        #lista-entradas.grid.cards {
            grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
            gap: 25px;
        }

            #lista-entradas.grid.cards img {
                width: 100%;
                display: block;
            }

            /* Lista de entradas como slider */

            #lista-entradas.slider .slick-dots {
                bottom: -40%;
            }

            #lista-entradas.projects .slick-dots {
                bottom: -20%;
            }

        /* Datos de la entrada */

        .post {

        }

        .post.grid {
            grid-template-columns: 400px 1fr;
            gap: 50px;
        }

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

            #post__imagen {
                margin-bottom: 25px;
                overflow: hidden;
                object-fit: cover;
            }

                #post__imagen img {
                    margin: auto;
                    max-height: 500px;
                    display: block;
                }

            #post__titulo {

            }

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

                #post__contenido {
                    margin-top: 35px;
                }

                    #post__contenido p {
                        line-height: 1.8em;
                    }

                    #post__contenido p:not(:last-child) {
                        margin-bottom: 25px;
                    }

                    #post__contenido #post__metadatos p {
                        margin-bottom: 5px;
                    }

                    #post__metadatos p {
                        word-break: break-all;
                    }

                    #post__metadatos a {
                        color: #3652A5;
                    }

        /* Vista especial para Proyectos */

        #post__grid {
            grid-template-columns: 350px 1fr;
            gap: 25px;
        }

            #post__grid img {
                margin: auto;
                margin-bottom: 15px;
                max-width: 800px;
                width: 100%;
                display: block;
            }

            #post__grid p:not(:last-child) {
                margin-bottom: 25px;
            }

            /* Descripción para proyectos */

            .category-description {
                margin-top: -20px;
                font-weight: 200;
                font-size: 0.9em;
            }

        /* Áreas con subcategorías */

        #areas {
            text-align: center;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 45px;
        }

            #areas img {
                width: 100%;
                display: block;
            }

            #areas a:hover {
                color: red;
            }

            #areas h3 {
                margin: 15px auto;
                font-weight: 300;
            }

            #areas h4 {
                font-size: 0.9em;
            }

    /* Páginas */

    #page__entrada {
        grid-template-columns: 400px 1fr;
        gap: 25px;
    }

    #page__imagen img {
        width: 100%;
        display: block;
    }

    /* Contacto */

    #contacto {
        margin: auto;
        max-width: 1024px;
    }

        #contacto__social-email {
            grid-template-columns: 1fr 1fr;
            gap: 25px;
        }

        #contacto__content {
            margin-top: 50px;
            text-align: center;
        }

            #contacto__content img {
                margin: auto;
                margin-bottom: 25px;
                max-width: 300px;
                display: block;
                box-shadow: 0px 25px 25px rgba(0, 0, 0, 0.1);
            }

            #contacto__content .social {
                margin-top: 10px;
            }

                #contacto__content .social i {
                    font-size: 1.5em;
                }

                #contacto__content .social a:hover {
                    color: #999;
                }

        #contacto input,
        #contacto textarea {
            width: 100%;
            box-sizing: border-box;
        }

        #contacto input:not(:last-child),
        #contacto textarea:not(:last-child) {
            margin-bottom: 15px;
        }

        #contacto #caracteres-restantes {
            text-align: right;
        }

        #contacto__mensaje-enviado {
            text-align: center;
        }

            #contacto__mensaje-enviado i {
                font-size: 4em;
                color: #3652A5;
            }

            #contacto__mensaje-enviado h2 {
                margin: 15px auto;
            }

            #contacto__mensaje-enviado .button {
                margin-top: 25px;
            }

    /* Mensajes */

    #mensajes .right-area {
        text-align: center;
    }

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