/* Fuentes */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wdth,wght@75..100,300..800');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,400');

/* BLOQUES */
@import "components.css";
@import "nav.css";
@import "content.css";

/**
    VARIABLES
**/
:root {
    --aum-orange: #F68633;
    --aum-orange-2: #fa9446;
    --aum-orange-light: #fff7f0;
    --aum-orange-dark: #A75B23;
    --aum-orange-dark2: #80461b;
    --aum-gray: #666;
    --aum-gray-4: #4c4c4c;
    --aum-gray-6: #666;
    --aum-gray-9: #999;
    --aum-gray-a: #aaa;
    --aum-gray-b: #bfbfbf;
    --aum-gray-c: #cdcdcd;
    --aum-gray-d: #d9d9d9;
    --aum-gray-e: #eeeeee;
    --aum-gray-f0: #f0f0f0;
    --aum-gray-f: #f6f6f6;
    --aum-gray-transparent: rgba(0.4,0.4,0.4,0.5);
    --aum-black-transparent: rgba(0,0,0,0.5);
    --aum-shadow: rgba(0,0,0,0.2);
    --aum-shadow-soft: rgba(0,0,0,0.1);
    --aum-text-white: #fff;
    --aum-text-gray: #ccc;
    --aum-white: #fff;

    --aum-footer-back: #282a2d;

    --aum-fuente-titulo: 'Oswald', Arial, Helvetica, sans-serif;
    --aum-fuente-contenido: 'PT Sans', 'Open Sans', Arial, Helvetica, sans-serif;
    --aum-fuente-color: #444;

}

body, html {
    padding:0px;
    margin: 0px;
    font-family: var(--aum-fuente-contenido);
    font-size: 14px;
    color: var(--aum-fuente-color);
    scroll-behavior: smooth;
}

#main-container {
    width: 100%;
    min-height: 100vh;
}

#aum-content {
    min-height: 100vh;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 120px 0px;
    box-sizing: border-box;
}

h1, h2 {
    padding: 0px;
    margin: 0px;
    font-family: var(--aum-fuente-titulo);
}

p {
    padding: 0px;
    margin: 0px;
    font-family: var(--aum-fuente-contenido);
}

/* 
    CONTENT LIMIT:
        - Limita el contenido a 1048 para resoluciones amplias
        - Permite manejar un limite menor con short
        - Permite controlar el limite del menu con wide
*/

        .content-limit {
            position: relative;
            z-index: auto;
            width: auto;
            min-width: 400px;
            max-width: 1048px;
            height: 100%;
            margin-left: auto;
            margin-right: auto;
            box-sizing: border-box;
        }
        .content-limit-auto-height {
            height: auto;
        }

        @media screen and (max-width: 800px){
            .content-limit{
                width: 100%;
                max-width: 100%;
                min-width: 100px;
            }
        }


        .content-limit.no-height {
            height: auto;
        }

        .content-limit.short {
            max-width: 816px;
        }

        .content-limit.inside {
            max-width: 1024px;
        }
        .content-limit.projects {
            max-width: 1232px;
        }
        .content-limit.wide {
            max-width: 1366px;
        }
        
/**
    LIGHT BOX
**/
        #lightbox {
            display: block;
            position: fixed;
            z-index: 10000;
            background-color: var(--aum-black-transparent);
            width: 100vw;
            height: 100vh;
            overflow: auto;
        }

        #lightbox #lightbox-content {
            position: absolute;
            z-index: auto;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            border-radius: 16px;
            background-color: #fff;
            padding: 32px;
            width: 65%;
            max-width: 100%;
            height: 80dvh;
            padding: 32px;
            overflow: hidden;
        }

        #lightbox #lightbox-content .closeBtn {
            position: absolute;
            z-index: auto;
            top: 24px;
            right: 24px;
            width:24px;
            height: 24px;
            background-image: url(../../resources/images/website/close.png);
            background-size: contain;
            background-position: center;
            cursor: pointer;
            margin-bottom: 32px;
        }

        #lightbox-content .lb-wrapper {
            display: flex;
            flex-direction: column; /* ahora los hijos se apilan verticalmente */
            height: 100%;
            max-height: 100%;
            overflow: hidden; /* previene scroll externo */
        }

        #lightbox-content .scrollable-content {
            flex: 1;
            overflow-y: auto;
            display: flex;
            gap: 32px;
            flex-wrap: wrap;
            align-items: stretch;
            justify-content: center;
            padding: 8px 0;
        }

        #lightbox-content .lb-image {
            flex: 1 1 50%;
            min-width: 350px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #lightbox-content .lb-image img {
            max-width: 100%;
            max-height: 100%;
            height: auto;
            border-radius: 12px;
            object-fit: contain;
        }

        #lightbox-content .lb-information {
            flex: 1 1 45%;
            min-width: 280px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            color: #333;
        }

        #lightbox-content .lb-title {
            font-size: 36px;
            font-family: var(--aum-fuente-titulo);
            font-weight: 300;
            color: var(--aum-fuente-color);
            margin: 0;
        }

        #lightbox-content .lb-subtitle {
            font-size: 21px;
            font-family: var(--aum-fuente-contenido);
            font-weight: 400;
            color: var(--aum-orange);
            margin: 0;
        }

        #lightbox-content .lb-description {
            font-size: 16px;
            font-family: var(--aum-fuente-contenido);
            color: var(--aum-fuente-color);
            line-height: 28px;
        }

        #lightbox-content .lb-technologies .title {
            font-family: var(--aum-fuente-titulo);
            font-weight: 300;
            font-size: 21px;
            color: var(--aum-fuente-color);
            margin: 8px 0;
        }

        #lightbox-content .tech-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 8px;
        }

        #lightbox-content .tech-badge {
            padding: 8px 16px;
            background-color: #fff;
            border-radius: 16px;
            font-size: 12px;
            font-family: var(--aum-fuente-contenido);
            font-weight: 400;
            color: var(--aum-fuente-color);
            border: 1px solid var(--aum-orange);
            white-space: nowrap;
        }


        #lightbox-content .lb-website {
            margin-top: 16px;
        }

        #lightbox-content .lb-website strong{
            font-family: var(--aum-fuente-titulo);
            font-weight: 300;
            font-size: 21px;
            color: var(--aum-fuente-color);
        }

        #lightbox-content .lb-website a {
            color: var(--aum-orange);
            text-decoration: none;
            font-size: 16px;
            font-weight: 400;
            text-decoration: underline;
            word-break: break-all;
        }

        #lightbox-content .lb-nav-buttons {
            margin-top: auto;
            display: flex;
            gap: 25px;
            justify-content: center;
        }

        #lightbox-content .lb-nav-buttons .nav-btn {
            width: 40px;
            height: 40px;
            background-color: transparent;
            border: none;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            cursor: pointer;
        }

        #lightbox-content .lb-nav-buttons .nav-btn.prev {
            background-image: url('../../resources/images/website/backward_button.png');
        }

        #lightbox-content .lb-nav-buttons .nav-btn.next {
            background-image: url('../../resources/images/website/forward_button.png');
        }

        #lightbox-content .lb-nav-buttons .nav-btn:hover {
            opacity: 0.8;
        }

        @media screen and (max-width: 800px){
            #lightbox #lightbox-content {
                padding: 16px;
                width: 80%;
                height: 90vh;
            }
            #lightbox-content .lb-image{
                min-width: 0;
            }
            .scroll-to-bottom {
                position: fixed;
                bottom: 13px;
                right: 20px;
                width: 48px;
                height: 48px;
                border: none;
                background-color: transparent;
                background-image: url('../../resources/images/website/arrow-down.png');
                background-size: cover;
                background-position: center;
                cursor: pointer;
                opacity: 1;
                transition: opacity 0.5s ease;
                z-index: 9999;
                outline: none;
                box-shadow: none;
            }

            .scroll-to-bottom.hide {
                opacity: 0;
                pointer-events: auto;
            }
        }




        

/**
    PRINCIPALES
*/
    /* MOSTRAR / ESCONDER */
        .hidden {
            visibility: hidden;
            opacity: 0;
            transition: visibility 0.1s ease-in-out 0.5s, opacity 0.5s ease-in-out 0s;
        }

        .visible {
            visibility: visible;
            opacity: 1;
            transition: visibility 0.1s ease-in-out 0s, opacity 0.5s ease-in-out 0.1s;
        }

        .vertical-center {
            position: absolute;
            z-index: auto;
            top:50%;
            transform: translateY(-50%);
        }
        .horizontal-center {
            margin: 0px auto;
        }


    /** Banner Principal para todas las secciones*/
        .banner {
            position: relative;
            z-index: auto;
            background-color: #666;
            width: 100%;
            height: 640px;
            border-bottom-left-radius: 16px;
            border-bottom-right-radius: 16px;
            overflow: hidden;
        }

        .banner .banner-image {
            position: absolute;
            z-index: 100;
            top:0px;
            left:0px;
            width: 100%;
            height: 100%;
        }

        .banner .banner-image.image {
            background-position:center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .banner .banner-image-overlay {
            position: absolute;
            z-index: 300;
            top:calc( 50% + 85px / 2 );
            transform: translateY(-50%);
            right: 0px;
            width: 516px;
            height: 482px;
        }
        .banner .banner-text {
            position: absolute;
            z-index: 200;
            top:50%;
            transform: translateY(-50%);
            width: 50%;
        }

        .banner .banner-text h1 {
            font-family: var(--aum-fuente-titulo);
            font-size: 48px;
            font-weight: 300;
            color: var(--aum-orange);
            padding:0px;
            margin:0px;
            text-transform: uppercase;
            line-height: 58px;
        }

        .banner .banner-text h2 {
            font-family: var(--aum-fuente-titulo);
            font-size: 48px;
            font-weight: 500;
            color: var(--aum-text-white);
            padding:0px;
            margin:0px;
            text-transform: uppercase;
            line-height: 58px;
        }

        .banner .banner-text .texto {
            font-family: var(--aum-fuente-contenido);
            font-size: 21px;
            font-weight: 400;
            color: var(--aum-text-gray);
            padding:0px;
            margin:0px 0px 16px 0px;
            line-height: 32px;
        }


        @media screen and (min-width: 800px) and (max-width: 1280px){
            .banner {
                height: 700px;
            }
            .banner .content-limit{
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                padding: 0 24px;
            }
            .banner .banner-text {
                /* left: 72px; */
                margin: 0 auto;
                position: relative;
                display: flex;
                flex-direction: column;
                top: 0;
                transform: none;
            }
            .banner .banner-image-overlay {
                position: relative;
                width: 350px;
                height: 300px;
                top: 0;
                transform: none;
                background-position:center;
                background-repeat: no-repeat;
                background-size: contain;
            }
            .banner .banner-text .call-to-action {
                width: fit-content !important; 
                align-self: flex-start;        
                margin-top: 24px;              
            }
        }
        @media screen and (max-width: 800px){
            .banner {
                height: 700px;
            }
            .banner .banner-image.image{
                background-position: 70% center;
            }
            .banner .banner-image video{
                object-fit: cover;
                object-position: 80% center;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 100;
                pointer-events: none;
            }
            .banner .banner-text {
                width: 90%;
                margin: 0 auto;
                position: relative;
                align-items: flex-start;
                display: flex;
                flex-direction: column;
                transform: translateY(-75%);
            }
            .banner .banner-text.with-video{
                transform: translateY(-50%);
            }
            
            .banner .banner-text h1 {
                font-size: 48px;
                line-height: 120%;
                text-align: left;
            }

            .banner .banner-text h2 {
                font-size: 48px;
                line-height: 120%;
                text-align: left;
            }

            .banner .banner-text .texto {
                font-size: 21px;
                font-weight: 400;
                line-height: 120%;
                font-family: var(--aum-fuente-contenido);
            }

            /* .banner .banner-text .call-to-action{
                font-size: 1rem;
                align-items: flex-start;
            } */

            .banner .banner-image-overlay{
                display: none;
            }
        }


/** Buttons **/
    .button {
        position: relative;
        z-index: auto;
        font-family: var(--aum-fuente-contenido);
        display: inline-block;
        padding: 8px 24px;
        height: 40px;
        line-height: normal;
        color: var(--aum-text-white);
        background-color: var(--aum-gray);
        border-radius: 4px;
        text-decoration: none;
        transition: all 0.2s ease-in 0s;
        font-weight: 400;
        font-size: 16px;
        cursor: pointer;
        box-sizing: border-box;
    }
    .button:hover {
        color: var(--aum-text-white);
        background-color: var(--aum-gray-9);
    } 

    /** CALL TO ACTION -- Boton Naranja en Menú **/
        .call-to-action {
            background-color: var(--aum-orange-2);
            color: var(--aum-text-white);
        }
        .call-to-action:hover {
            background-color: var(--aum-orange);
            color: var(--aum-text-white);
        }

     /** CALL TO ACTION -- Boton Blanco **/       
        .call-to-action.white {
            background-color: var(--aum-white);
            color: var(--aum-orange);
            border: 1px solid var(--aum-orange);
            width: 100%;
            text-align: center;
        }
        
        .call-to-action.white:hover {
            background-color: var(--aum-orange);
            color: var(--aum-text-white);
        }

     /** CALL TO ACTION -- Boton Naranja 100 **/       
        .call-to-action.orange {
            width: 100%;
            text-align: center;
        }

        /* Arrow Button */
        .arrow-button-container {
            position: relative;
            z-index: auto;
            display: block;
            margin-top: 8px;
        }

        .arrow-button {
            position: relative;
            z-index: auto;
            display: inline-block;
            border-radius: 24px;
            width: 40px;
            height: 40px;
            line-height: 40px;
            border: 1px solid var(--aum-white);
            color: var(--aum-text-white);
            overflow: hidden;
            text-decoration: none;
            white-space: nowrap;
            transition: width 0.5s cubic-bezier(0.6,1.8,0.58,0.58);
        }

        .arrow-button .arrow-text {
            position: relative;
            z-index: auto;
            display: block;
            opacity: 0;
            height: 40px;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.6,1.8,0.58,0.58);
            box-sizing: border-box;
            margin-left: 20px;
            margin-right: 48px;
        }

        .arrow-button:hover .arrow-text {
            opacity: 1;
        }

        
        .arrow-button .arrow {
            position: absolute;
            z-index: auto;
            display: block;
            right: 0px;
            top: 0px;
            width:40px;
            height: 40px;
        }

        .arrow-button .arrow svg {
            position: absolute;
            z-index: auto;
            top: 50%;
            left:50%;
            transform: translate(-50%,-50%);
        }

        .arrow-button:hover {
            width: calc-size(max-content, size);
        }

        @media screen and (max-width: 800px) {
            .arrow-button:hover {
                width: 40px !important;
            }
            .arrow-button:hover .arrow-text {
                opacity: 0 !important;
            }
        }