﻿.animacion {
    position: relative;
    animation-name: mymove;
    animation-duration: 3s;
    visibility: visible;
    animation-direction: revert;
}

@keyframes mymove {
    from {
        left: -1000px;
        top: -500px;
        transform: scale(0.5) rotate(90deg);
        opacity: 0;
    }

    to {
        left: 0px;
        top: 0px;
        transform: scale(1) rotate(360deg);
        opacity: 1;
    }
}

section {
    height: 95vh; 
    padding: 10px;
    display: flex;
    align-items: center; 
    justify-content: center; 
    text-align: center;
}

#Home {
    background-image: url('images/Fondos/FondoHome.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    height: 110vh;
}

#GC {
    background-image: url('images/Fondos/FondoGC.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    height: 110vh;
}

    #GC .left-part {
        flex: 5; 
        padding: 0; 
        text-align: justify; 
        margin: 60px auto;
        width: 100%;
        box-sizing: border-box; 
    }

    #GC .right-part {
        flex: 3; /* Asegura que la columna izquierda mantenga un ancho proporcional */
        padding: 0;
        text-align: left; /* Alinea el texto a la izquierda */
        /*border: 1px solid #ccc;*/ /* Bordes para visualizar el contenedor */
        box-sizing: border-box; /* Incluye el padding en el tamaño total */
    }

#HPC {
    background-image: url('images/Fondos/FondoHPC_T.png');
    background-size: cover;
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    height: 120vh;
    box-sizing: border-box;
}

    #HPC .left-part {
        flex: 5; /* Asegura que la columna izquierda mantenga un ancho proporcional */
        padding: 0;
        text-align: left; /* Alinea el texto a la izquierda */
        /*border: 1px solid #ccc;*/ /* Bordes para visualizar el contenedor */
        box-sizing: border-box; /* Incluye el padding en el tamaño total */
    }

    #HPC .right-part {
        flex: 4; /* Cada parte ocupa el mismo espacio */
        padding: 0; /* Relleno interno */
        text-align: justify; /* Justifica el texto dentro de cada parte */
        /*border: 1px solid #ccc;*/ /* Bordes para visualizar las divisiones */
        margin: 100px auto 0;
        width: 100%;
        box-sizing: border-box; /* Asegura que padding y border no afecten el tamaño */
    }

#VCS {
    background-image: url('images/Fondos/FondoVCS_T.png');
    background-size: cover;
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    height: 120vh;
    box-sizing: border-box;
}

    #VCS .left-part {
        flex: 1; /* Asegura que la columna izquierda mantenga un ancho proporcional */
        padding: 100px;
        text-align: left; /* Alinea el texto a la izquierda */
        /*border: 1px solid #ccc;*/ /*Bordes para visualizar el contenedor*/
        box-sizing: border-box; /* Incluye el padding en el tamaño total */
    }

    #VCS .center-part {
        flex: 4; /* Cada parte ocupa el mismo espacio */
        padding: 10px; /* Relleno interno */
        text-align: justify; /* Justifica el texto dentro de cada parte */
        /*border: 1px solid #ccc;*/ /*Bordes para visualizar las divisiones*/
        box-sizing: border-box; /* Asegura que padding y border no afecten el tamaño */
        margin: 120px auto 0;
        width: 100%;
    }

    #VCS .right-part {
        flex: 1; /* Cada parte ocupa el mismo espacio */
        padding: 100px; /* Relleno interno */
        text-align: justify; /* Justifica el texto dentro de cada parte */
        /*border: 1px solid #ccc;  Bordes para visualizar las divisiones */
        box-sizing: border-box; /* Asegura que padding y border no afecten el tamaño */
    }

#SBHPC {
    background-image: url('images/Fondos/FondoSBHPC_T.png');
    background-size: cover;
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    height: 120vh;
    box-sizing: border-box;
}

    #SBHPC .top-part {
        flex: 3; /* El div superior ocupa una porción proporcional del espacio */
        padding: 10px; /* Espaciado interno */
        text-align: justify; /* Justifica el texto dentro de cada parte */
        /*border: 1px solid #ccc;*/ /* Bordes para visualizar */
        /*background-color: rgba(255, 255, 255, 0.8);*/ /* Fondo opcional */
        margin: 120px 50px 10px auto;
        width: 96%;
    }

    #SBHPC .bottom-part {
        flex: 5; /* El div inferior ocupa una porción proporcional del espacio */
        padding: 0; /* Espaciado interno */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        /*border: 1px solid #ccc;*/ /* Bordes para visualizar */
        /*background-color: rgba(240, 240, 240, 0.8);*/ /* Fondo opcional */
        margin: 0px 0px 0px auto;
        width: 100%;
    }

    #SBHPC .left-part {
        flex: 1; /* El div superior ocupa una porción proporcional del espacio */
        padding: 10px; /* Espaciado interno */
        text-align: justify; /* Justifica el texto dentro de cada parte */
        /*border: 1px solid #ccc;*/ /* Bordes para visualizar */
        /*background-color: rgba(255, 255, 255, 0.8);*/ /* Fondo opcional */
    }

    #SBHPC .right-part {
        flex: 1; /* El div superior ocupa una porción proporcional del espacio */
        padding: 10px; /* Espaciado interno */
        text-align: justify; /* Justifica el texto dentro de cada parte */
        /*border: 1px solid #ccc;*/ /* Bordes para visualizar */
        /*background-color: rgba(255, 255, 255, 0.8);*/ /* Fondo opcional */
    }

#DAO {
    background-image: url('images/Fondos/FondoDAO_T.png');
    background-size: cover;
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    height: 120vh;
    box-sizing: border-box;
}

    #DAO .top-part {
        flex: 1; /* El div superior ocupa una porción proporcional del espacio */
        padding: 0; /* Espaciado interno */
        text-align: justify; /* Justifica el texto dentro de cada parte */
        /*border: 1px solid #ccc;*/
        /*background-color: rgba(255, 255, 255, 0.8);*/ /* Fondo opcional */
        margin: 120px 10px 0 10px;
        width: 98%;
        align-self: center;
    }

    #DAO .bottom-part {
        flex: 6; /* El div inferior ocupa una porción proporcional del espacio */
        padding: 0; /* Espaciado interno */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        /*border: 1px solid #ccc;*/
        /*background-color: rgba(240, 240, 240, 0.8);*/ /* Fondo opcional */
        margin: 0 10px 140px 10px;
        width: 98%;
    }

    #DAO .left-part {
        flex: 1; /* El div superior ocupa una porción proporcional del espacio */
        padding: 10px; /* Espaciado interno */
        text-align: justify; /* Justifica el texto dentro de cada parte */
        /*border: 1px solid #ccc;*/
        /*background-color: rgba(255, 255, 255, 0.8);*/ /* Fondo opcional */
    }

    #DAO .center-part {
        flex: 1; /* El div superior ocupa una porción proporcional del espacio */
        padding: 10px; /* Espaciado interno */
        text-align: justify; /* Justifica el texto dentro de cada parte */
        /*border: 1px solid #ccc;*/
        /*background-color: rgba(255, 255, 255, 0.8);*/ /* Fondo opcional */
    }

    #DAO .right-part {
        flex: 1; /* El div superior ocupa una porción proporcional del espacio */
        padding: 10px; /* Espaciado interno */
        text-align: justify; /* Justifica el texto dentro de cada parte */
        /*border: 1px solid #ccc;*/
        /*background-color: rgba(255, 255, 255, 0.8);*/ /* Fondo opcional */
    }

#IS {
    background-image: url('images/Fondos/FondoIS_T.png');
    background-size: cover;
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    height: 120vh;
    box-sizing: border-box;
}

    #IS .top-part {
        flex: 1; /* El div superior ocupa una porción proporcional del espacio */
        padding: 0; /* Espaciado interno */
        text-align: justify; /* Justifica el texto dentro de cada parte */
        /*border: 1px solid #ccc;*/
        /*background-color: rgba(255, 255, 255, 0.8);*/ /* Fondo opcional */
        margin: 120px 10px 0 10px;
        width: 98%;
    }

#contactus {
    background-color: rgba(33, 37, 41, 0.7) !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 90vh;
    box-sizing: border-box;
}

    #contactus .r1-part {
        flex: 1; /* El div superior ocupa una porción proporcional del espacio */
        padding: 0; /* Espaciado interno */
        text-align: center; /* Justifica el texto dentro de cada parte */
        /*border: 1px solid #ccc;*/
        /*background-color: rgba(255, 255, 255, 0.8);*/ /* Fondo opcional */
        margin: 40px 10px 10px 10px;
        width: 98%;
    }

    #contactus .r2-part {
        flex: 1; /* El div superior ocupa una porción proporcional del espacio */
        padding: 0; /* Espaciado interno */
        text-align: center; /* Justifica el texto dentro de cada parte */
        /*border: 1px solid #ccc;*/
        margin: 0 10px 0 10px;
        width: 98%;
    }

    #contactus .r3-part {
        flex: 1; /* El div inferior ocupa una porción proporcional del espacio */
        padding: 0; /* Espaciado interno */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        /*border: 1px solid #ccc;*/
        /*background-color: rgba(240, 240, 240, 0.8);*/ /* Fondo opcional */
        margin: 0 10px 0 10px;
        width: 98%;
    }

    #contactus .c1-part {
        flex: 1; /* El div superior ocupa una porción proporcional del espacio */
        padding: 0; /* Espaciado interno */
        text-align: center; /* Justifica el texto dentro de cada parte */
        /*border: 1px solid #ccc;*/
        margin: 0 0 0 0;
    }

#Construccion {
    background-image: url('images/Fondos/FondoConstruccion.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}

