/*------------------------------------------------------------------------IMPORTACIÓN DE FUENTES-------------------------------------------------------------------------------*/
@font-face {
    font-family: "BrunoAce";
    src: url("assets/fonts/BrunoAce-Regular.woff2") format("woff2");
    font-display: swap;
    font-weight: 400;
}

@font-face {
    font-family: "FunnelDisplay";
    src: url("assets/fonts/FunnelDisplay-Regular.woff2") format("woff2");
    font-display: swap;
    font-weight: 400;
}

@font-face {
    font-family: "FunnelDisplay";
    src: url("assets/fonts/FunnelDisplay-Bold.woff2") format("woff2");
    font-display: swap;
    font-weight: 700;
}

@font-face {
    font-family: "ShulphurPoint";
    src: url("assets/fonts/SulphurPoint-Regular.woff2") format("woff2");
    font-display: swap;
    font-weight: 400;
}

@font-face {
    font-family: "ShulphurPoint";
    src: url("assets/fonts/SulphurPoint-Light.woff2") format("woff2");
    font-display: swap;
    font-weight: 300;
}

/*------------------------------------------------------------------------VARIABLES GLOBALES-----------------------------------------------------------------------------------*/
:root{
    /*------------------COLORES---------------------------*/

    --color-base: rgb(255,255,255);
    --color-fondo: var(--color-base);
    --color-flechas: var(--color-base);
    --color-fondo-navbar: rgb(from var(--color-base) r g b /1%);
    --color-iconos-navbar: var(--color-base);
    --color-fondo-configuracion: rgb(from var(--color-base) r g b /1%);
    --color-iconos-configuracion: var(--color-base);
    --color-switch-apagado: rgb(177,177,177);
    --color-switch-encendido: rgb(0,0,0);
    --color-bola-switch: var(--color-base);
    --color-fondo-dialogo-configuracion: rgb(from var(--color-base) r g b /10%);
    --color-fondo-boton-dialogo-congiguracion: rgba(140,140,140,0.1);
    --color-letras-titulo: var(--color-base);
    --color-letras-subtitulo: var(--color-base);
    --color-letras-contenido: var(--color-base);
    --color-mascara-foto: rgba(217,217,217,0.6);
    --color-fondo-foto: var(--color-base);
    --color-fondo-cards: rgba(161,161,161,0.25);
    --color-fondo-miniaturas: var(--color-base);
    --color-iconos-tecnologias: var(--color-base);
    --color-luz-cards: var(--color-base);
    --color-fondo-stack: rgba(161,161,161,0.25);
    --color-punto-stack: var(--color-base);
    --color-iconos-stack: var(--color-base);
    --color-separador-vertical: var(--color-base);
    --color-fondo-contacto: rgba(161,161,161,0.25);
    --color-input: rgb(164,164,164,0.25);
    --color-boton-enviar: rgba(161,161,161,0.25);
    --color-luz-boton-enviar: var(--color-base);
    --color-iconos-contacto: var(--color-base);
    --color-fondo-pie: rgb(from var(--color-base) r g b /1%);
    --color-legal-pie: var(--color-base);
    --color-iconos-pie: var(--color-base);
    --color-modal: rgba(25, 25, 30, 0.85);
    --color-navbar-modal: rgb(from var(--color-base) r g b /3%);
    --color-enlaces-modal: var(--color-base);
    --color-boton-modal: rgba(140,140,140,0.1);
    --color-x-modal: var(--color-base);

    /*------------------BORDES---------------------------*/

    --borde-navbar: 1px solid rgb(from var(--color-base) r g b /10%);
    --borde-configuracion: 2px solid var(--color-base);
    --borde-switch: 2px solid var(--color-base);
    --borde-dialogo-configuracion: 2px solid var(--color-base);
    --borde-boton-dialogo-configuracion: 2px solid var(--color-base);
    --borde-mascara-foto: 1px solid rgb(from var(--color-base) r g b /10%);
    --borde-cards: 6px double var(--color-base);
    --borde-cards-multimedia: 2px solid var(--color-base);
    --borde-stack: 2px solid var(--color-base);
    --borde-contacto: 2px solid var(--color-base);
    --borde-input: 1px solid var(--color-base);
    --borde-input-activo: 2px solid var(--color-base);
    --borde-boton-enviar: 6px double var(--color-base);
    --borde-pie: 1px solid rgb(from var(--color-base) r g b /10%);
    --borde-modal: 2px solid var(--color-base);
    --borde-boton-modal: 2px solid var(--color-base);

    /*------------------SOMBRAS---------------------------*/

    --sombra-flechas: 0 0 2px rgb(from var(--color-base) r g b /100%);
    --sombra-navbar: 0px 0px 5px 3px rgb(from var(--color-base) r g b /5%) inset;
    --sombra-borde-navbar: 0px 0px 5px 10px rgb(from var(--color-base) r g b /30%);
    --sombra-iconos-navbar: 0 0 2px rgb(from var(--color-base) r g b /100%);
    --sombra-iconos-configuracion: 0 0 2px rgb(from var(--color-base) r g b /100%);
    --sombra-switch: 0px 0px 5px 5px rgb(from var(--color-base) r g b /30%);
    --sombra-dialogo-configuracion: 0px 0px 10px 10px rgba(0, 0, 0, 0.5);
    --sombra-dialogo-configuracion-pulso: 0px 0px 5px 2px rgb(from var(--color-base) r g b /100%);
    --sombra-boton-dialogo-configuracion: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
    --sombra-boton-dialogo-configuracion-hover: 0px 0px 5px 2px rgb(from var(--color-base) r g b /100%);
    --sombra-letras: 0 0 5px rgb(from var(--color-base) r g b /100%);
    --sombra-mascara: 0px 0px 10px 5px rgb(from var(--color-base) r g b /30%) inset;
    --sombra-mascara-hover: 0px 0px 10px 5px rgb(from var(--color-base) r g b /30%);
    --sombra-foto-apagada: 0 0 5px rgb(from var(--color-base) r g b /0%);
    --sombra-foto: 0 0 5px rgb(from var(--color-base) r g b /100%);
    --sombra-cards: 0px 0px 10px 10px rgba(0, 0, 0, 0.5);
    --sombra-cards-hover: 0px 0px 5px 1px rgb(from var(--color-base) r g b /100%);
    --sombra-borde-cards: 0px 0px 5px 1px rgb(from var(--color-base) r g b /100%) inset;
    --sombras-iconos-tecnologias: 0 0 2px rgb(from var(--color-base) r g b /30%);
    --sombra-luz-cards: 0px 0px 5px 10px rgb(from var(--color-base) r g b /30%);
    --sombra-luz-cards-destello: 0px 0px 30px 30px rgb(from var(--color-base) r g b /40%);
    --sombra-stack: 0px 0px 10px 10px rgba(0, 0, 0, 0.5);
    --sombra-stack-hover: 0px 0px 10px 5px rgb(from var(--color-base) r g b /30%);
    --sombra-iconos-stack: 0 0 10px rgb(from var(--color-base) r g b /50%);
    --sombra-contacto: 0px 0px 10px 10px rgba(0, 0, 0, 0.5);
    --sombra-borde-contacto: 0px 0px 5px 10px rgb(from var(--color-base) r g b /30%);
    --sombra-input: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
    --sombra-input-activo: 0px 0px 10px 10px rgb(from var(--color-base) r g b /30%);
    --sombra-boton-enviar: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
    --sombra-boton-enviar-hover: 0px 0px 5px 1px rgb(from var(--color-base) r g b /100%);
    --sombra-borde-boton-enviar: 0px 0px 5px 1px rgb(from var(--color-base) r g b /100%) inset;
    --sombra-luz-boton-enviar: 0px 0px 5px 10px rgb(from var(--color-base) r g b /30%);
    --sombra-iconos-contacto: 0 0 10px rgb(from var(--color-base) r g b /50%);
    --sombra-pie: 0px 0px 5px 3px rgb(from var(--color-base) r g b /5%) inset;
    --sombra-borde-pie: 0px 0px 5px 10px rgb(from var(--color-base) r g b /30%);
    --sombra-legal-pie: 0px 0px 5px rgb(from var(--color-base) r g b /100%);
    --sombra-iconos-pie: 0 0 10px rgb(from var(--color-base) r g b /50%);
    --sombra-enlaces-modal: 0px 0px 10px rgb(from var(--color-base) r g b /100%);
    --sombra-boton-modal: 0px 0px 5px 5px rgba(0,0,0,1);
    --sombra-boton-modal-hover: 0px 0px 5px 2px rgb(from var(--color-base) r g b /100%);

    /*------------------TAMAÑOS---------------------------*/

    --tamano-flechas: 60px;
    --tamano-navbar-alto: 80px;
    --tamano-icono-navbar: 48px;
    --tamano-icono-configuracion: 48px;
    --tamano-largo-switch: 40px;
    --tamano-alto-switch: 26px;
    --tamano-bola-switch: 18px;
    --tamano-icono-tecnologias: 24px;
    --tamano-luz: 6px;
    --tamano-punto-stack: 1rem;
    --tamano-icono-stack: 32px;
    --tamano-largo-boton-enviar: 150px;
    --tamano-alto-boton-enviar: 50px;
    --tamano-icono-contacto: 32px;
    --tamano-pie-pagina-alto: 80px;
    --tamano-largo-icono-accesibilidad: 88px;
    --tamano-alto-icono-accesibilidad: 31px;
    --tamano-alto-navbar-modal: 60px;
    --tamano-boton-modal: 40px;

    /*------------------TEXTOS---------------------------*/

    --texto-pequeno: 0.75rem;
    --texto-contenido: 1rem;
    --texto-subtitulo: 1.5rem;
    --texto-titulo: 2rem;

    /*------------------ESCALAS---------------------------*/

    --escalado-reduccion: 0.95;
    --escalado-pequeno: 1.05;
    --escalado-medio: 1.1;
    --escalado-grande: 1.2;

    /*------------------RADIOS---------------------------*/

    --radio-mediano: 10px;
    --radio-grande: 20px;

    /*------------------MODO CLARO---------------------------*/
    
    &[data-theme="claro"]{
        --color-base: rgb(0,0,0);
        --color-luz: rgb(165, 203, 253);
        --color-switch-apagado: rgb(208, 208, 208);
        --color-switch-encendido: rgb(255,255,255);
        --color-mascara-foto: rgba(217,217,217,0.6);
        --color-fondo-cards: rgba(205, 205, 205, 0.10);
        --color-luz-cards: var(--color-luz);
        --color-fondo-stack: rgba(161,161,161,0.25);
        --color-fondo-contacto: rgba(161,161,161,0.25);
        --color-input: rgb(164,164,164,0.25);
        --color-boton-enviar: rgba(161,161,161,0.25);
        --color-luz-boton-enviar: var(--color-luz);
        --color-modal: rgba(227, 224, 230, 0.75);
        --color-boton-modal: rgba(140,140,140,0.1);

        --sombra-cards: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
        --sombra-luz-cards: 0px 0px 5px 10px rgb(from var(--color-luz) r g b /30%);
        --sombra-luz-cards-destello: 0px 0px 30px 30px rgb(from var(--color-luz) r g b /50%);
        --sombra-stack: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
        --sombra-contacto: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
        --sombra-input: 0px 0px 10px 3px rgba(0, 0, 0, 0.4);
        --sombra-input-activo: 0px 0px 10px 10px rgb(from var(--color-base) r g b /40%);
        --sombra-boton-enviar: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
        --sombra-luz-boton-enviar: 0px 0px 5px 10px rgb(from var(--color-luz) r g b /30%);
        --sombra-boton-modal: 0px 0px 5px 2px rgba(0,0,0,0.5);
        --sombra-boton-modal-hover: 0px 0px 5px 2px rgb(from var(--color-base) r g b /100%);
    }

    /*------------------ANIMACIONES OFF---------------------------*/

    &[data-animation="off"]{

        *{
            text-shadow: none !important;
            box-shadow: none !important;
            filter: none !important;
            transition: none !important;
            scale: none !important;
            transform: scale(none) !important;
            animation: none !important;
        }
    }    
}

/*------------------------------------------------------------------------RESET Y BASES-----------------------------------------------------------------------------------*/

html{
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;

    &[data-theme="claro"] body::before{
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce){
    html{
        scroll-behavior: auto;
    }
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
    position: relative;
    min-height: 100vh;
    background-color: var(--color-fondo);
    background-image: url("assets/backgrounds/Fondo-negro.webp");
    background-size: 100% 100%;
    font-family: "ShulphurPoint";
    font-size: var(--texto-contenido);
    color: var(--color-letras-contenido);
    z-index: -20;

    &::before{
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        width: 100%;
        height: 100%;
        background-color: var(--color-fondo);
        background-image: url("assets/backgrounds/Fondo-blanco.webp");
        background-size: 100% 100%;
        opacity: 0;
        transition: opacity 1s ease;
        z-index: -10;
    }

    h1{
        font-family: "BrunoAce";
        color: var(--color-letras-titulo);
    }

    h2{
        font-family: "FunnelDisplay";
        font-weight: 700;
        font-size: var(--texto-titulo);
        color: var(--color-letras-titulo);
    }

    h3{
        font-family: "FunnelDisplay";
        font-size: var(--texto-subtitulo);
        color: var(--color-letras-subtitulo);
    }
}

/*-------------------------------------------------------------------------CANVAS------------------------------------------------------------------------------------*/

.canvas-matrix{
    position: fixed;
    top: 0;
    left: 0;
    z-index: -6;
}

/*------------------------------------------------------------------------CABECERA-----------------------------------------------------------------------------------*/

.cabecera{
    position: fixed;
    width: 100%;
    z-index: 100;

    /*----------------------NAVBAR--------------------------*/

    .navbar{
        position: relative;
        height: var(--tamano-navbar-alto);
        background-color: var(--color-fondo-navbar);
        border: var(--borde-navbar);
        box-shadow: var(--sombra-navbar);
        backdrop-filter: blur(2px);

        &::before{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 10px;
            content: "";
            backdrop-filter: brightness(2) saturate(2) contrast(2);
        }

        &::after{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 10px;
            content: "";
            backdrop-filter: brightness(3) saturate(3) contrast(3);
        }

        .navbar-lista{
            display: flex;
            flex-direction: row;
            gap: 20px;
            place-items: center;
            height: 100%;
            padding: 20px;
            list-style: none;

            .navbar-elemento{
                width: var(--tamano-icono-navbar);
                height: var(--tamano-icono-navbar);

                .icono{
                    width: 100%;
                    aspect-ratio: 1;
                    stroke-width: 0.5px;
                    shape-rendering: geometricPrecision;
                    color: var(--color-iconos-navbar);
                }

                button{
                    width: 100%;
                    aspect-ratio: 1;
                    background: none;
                    border: none;
                    cursor: pointer;
                }

                &:hover{
                    transform-origin: center;
                    scale: var(--escalado-pequeno);

                    .icono use{
                        stroke-width: 1px;
                        filter: drop-shadow(var(--sombra-iconos-navbar));
                    }
                    
                }

                &:active{
                    scale: var(--escalado-reduccion);

                    .icono use{
                        stroke-width: 0.5px;
                        shape-rendering: geometricPrecision;
                        filter: none;
                    }
                }
            }

            .elemento-settings{
                margin-left: auto;

                .tutorial{
                    animation: pulso-boton-configuracion 2s ease infinite;
                    
                    .icono use{
                        animation: pulso-icono-configuracion 2s ease infinite;
                    }
                }
            }
        }
    }

    /*----------------------EFECTO REFLEXIÓN--------------------------*/

    .caja-reflectora{
        position: fixed;
        width: 100%;
        height: 1px;
        backdrop-filter: brightness(3);
    }

    /*----------------------MENU OPCIONES--------------------------*/

    .configuracion-menu{
        position: fixed;
        top: 80px;
        right: 0px;
        left: auto;
        bottom: auto;
        background-color: var(--color-fondo-configuracion);
        border: var(--borde-configuracion);
        border-radius: 0px 0px 20px 20px;
        padding: 20px;
        backdrop-filter: blur(10px);
        visibility: hidden;
        transform-origin: top;
        transform: scaleY(0);
        opacity: 0;
        transition: transform 0.3s ease, visibility 0.3s ease, opacity 0.6s ease-in;

        &[data-estado="abierto"]{
            visibility: visible;
            transform: scaleY(1);
            opacity: 1;
        }
        
        .configuracion-lista{
            display: flex;
            flex-direction: column;
            gap: 10px;
            list-style: none;
            .configuracion-elemento{
                position: relative;
                display: flex;
                flex-direction: row;
                gap: 20px;
                place-items: center;
                .contenedor-iconos-configuracion{
                    position: relative;
                    width: var(--tamano-icono-configuracion);
                    height: var(--tamano-icono-configuracion);
                    .icono{
                        position: absolute;
                        width: 100%;
                        aspect-ratio: 1;
                        stroke-width: 0.5px;
                        shape-rendering: geometricPrecision;
                        color: var(--color-iconos-configuracion);
                        transition: opacity 0.6s ease;
                        &.encendido{
                            opacity: 0%;
                        }
                    }
                }
                .interruptor-cuerpo{
                    position: relative;
                    width: var(--tamano-largo-switch);
                    height: var(--tamano-alto-switch);
                    background-color: var(--color-switch-apagado);
                    border: var(--borde-switch);
                    border-radius: 20px;
                    cursor: pointer;
                    .interruptor-bola{
                        position: absolute;
                        top: 2px;
                        left: 2px;
                        width: var(--tamano-bola-switch);
                        aspect-ratio: 1;
                        background-color: var(--color-bola-switch);
                        border-radius: 50%;
                        transition: transform 0.6s ease;
                    }
                    &:hover{
                        box-shadow: var(--sombra-switch);
                    }
                }
                .interruptor-cuerpo:hover+.contenedor-iconos-configuracion{
                    .icono use{
                        stroke-width: 1px;
                        transform-origin: center;
                        scale: var(--escalado-pequeno);
                        filter: drop-shadow(var(--sombra-iconos-configuracion));
                    }
                }
                .interruptor-checkbox{
                    position: absolute;
                    left: 14px;
                    opacity: 0;
                    pointer-events: none;
                }
                .interruptor-checkbox:checked+.interruptor-cuerpo{
                    background-color: var(--color-switch-encendido);
                    .interruptor-bola{
                        transform: translateX(14px);
                    }
                }
                .interruptor-checkbox:checked~.contenedor-iconos-configuracion{
                    .encendido{
                        opacity: 100%;
                    }
                    .apagado{
                        opacity: 0%;
                    }
                }
            }
        }
    }

    /*----------------------DIALOGO CONFIGURACIÓN--------------------------*/

    .dialogo-configuracion{
        position: absolute;
        top: 0;
        left: auto;
        right: 88px;
        width: 200px;
        padding: 10px;
        background-color: var(--color-fondo-dialogo-configuracion);
        border: var(--borde-dialogo-configuracion);
        border-radius: var(--radio-grande);
        color: var(--color-letras-contenido);
        box-shadow: var(--sombra-dialogo-configuracion);

        &[open]{
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        &.tutorial{
            animation: aparicion-tutorial 4s ease, pulso-dialogo-configuracion 2s ease infinite;
        }
        
        .lista-dialogo-configuracion{
            margin-left: 1rem;
            list-style: circle;
        }

        .boton-dialogo-configuracion{
            align-self: center;
            width: 80%;
            padding: 5px;
            background-color: var(--color-fondo-boton-dialogo-congiguracion);
            border: var(--borde-boton-dialogo-configuracion);
            border-radius: var(--radio-grande);
            color: var(--color-letras-titulo);
            font-family: "ShulphurPoint";
            font-size: 1rem;
            box-shadow: var(--sombra-boton-dialogo-configuracion);
            cursor: pointer;

            &:hover{
                scale: var(--escalado-pequeno);
                box-shadow: var(--sombra-boton-dialogo-configuracion-hover);
            }

            &:active{
                scale: var(--escalado-reduccion);
                box-shadow: none;
            }
        }
    }
}

/*------------------------------------------------------------------------MAIN-----------------------------------------------------------------------------------*/

.principal{
    
    .seccion{
        position: relative;
        display: flex;
        flex-direction: column;
        place-items: center;
        place-content: center;
        min-height: 100vh;
        scroll-snap-align: start; 

        .seccion-cabecera{
            position: absolute;
            top: 150px;
            display: flex;
            flex-direction: column;
            place-items: center;
            gap: 20px;
            width: 100%;

            .linea-decorativa-titulo{
                height: 2px;
                width: 50%;
                background-color: var(--color-letras-titulo);
                border-radius: 50%;
                transform: scaleX(0);
                transition: transform 0.5s ease 0.2s;
            }
        }

        .desplazamiento{
            position: absolute;

            &.avance{
                bottom: 0;
            }

            &.retroceso{
                top: 80px;
            }

            .flecha{
                width: 60px;
                aspect-ratio: 1;
                stroke-width: 0.5px;
                shape-rendering: geometricPrecision;
                color: var(--color-flechas);

                &:hover{
                    scale: var(--escalado-medio);

                    use{
                        stroke-width: 1px;
                        filter: drop-shadow(var(--sombra-flechas));
                    }
                }

                &:active{
                    scale: var(--escalado-reduccion);

                    use{
                        stroke-width: 0.5px;
                        shape-rendering: geometricPrecision;
                        filter: none;
                    }
                }
            }
        }
    }

    .seccion.visible{

        .linea-decorativa-titulo{
            transform: scaleX(1);
        }
    }

    /*----------------------SECCIÓN PORTADA--------------------------*/

    .seccion-portada{
        
        .estructura-portada{
            display: flex;
            flex-direction: row;
            place-items: center;
            gap: 50px;
            justify-content: center;

            .seccion-presentacion{
                display: flex;
                flex-direction: column;
                opacity: 0;
                transition: scale 1s ease, opacity 0.1s ease;
                animation: pulso-portada-letras 2s ease;

                .titulo-principal{
                    font-size: clamp(64px,6.666666vw,128px);
                    font-family: "BrunoAce";
                    font-weight: 400;
                    transition: text-shadow 1s ease;
                }

                .subtitulo-principal{
                    font-size: clamp(32px,3.333333vw,64px);
                    font-family: "FunnelDisplay";
                    font-weight: 400;
                    transition: text-shadow 1s ease;
                }

                &:hover{
                    scale: var(--escalado-pequeno);

                    .titulo-principal,.subtitulo-principal{
                        text-shadow: var(--sombra-letras);
                    }
                }
            }

            .mascara-foto-principal{
                width: clamp(220px,30%,580px);
                aspect-ratio: 1;
                background-color: var(--color-mascara-foto);
                border: var(--borde-mascara-foto);
                border-radius: 50%;
                box-shadow: var(--sombra-mascara);
                overflow: hidden;
                backdrop-filter: blur(2px);
                opacity: 0;
                transition: scale 1s ease, box-shadow 1s ease, opacity 0.1s ease;
                animation: pulso-portada-foto 3s ease;

                .foto-principal{
                    width: 100%;
                    aspect-ratio: 1;
                    transition: filter 1s ease;
                    filter: drop-shadow(var(--sombra-foto-apagada));
                    will-change: filter;
                }

                &:hover{
                    scale: var(--escalado-medio);
                    box-shadow: var(--sombra-mascara), var(--sombra-mascara-hover);

                    .foto-principal{
                        filter: drop-shadow(var(--sombra-foto));
                    }
                }
            }
        }
    }

    .seccion-portada.visible{

        .seccion-presentacion{
            opacity: 1;
            transition: scale 1s ease, opacity 1s ease 0.4s;
        }

        .mascara-foto-principal{
            opacity: 1;
            transition: scale 1s ease, opacity 1s ease 0.8s;
        }
    }

    /*----------------------SECCIÓN PROYECTOS--------------------------*/

    .seccion-proyectos{

        .estructura-cards{
            display: grid;
            grid-template-columns: repeat(3,minmax(200px,1fr));
            grid-template-rows: repeat(2,minmax(150,1fr));
            gap: 30px;
            width: 64.583333%;
            margin-top: 100px;

            .card-proyecto{
                position: relative;
                width: clamp(260px,100%,500px);
                aspect-ratio: 1.333333;
                padding: 3px;
                background-color: var(--color-fondo-cards);
                border-radius: var(--radio-grande);
                box-shadow: var(--sombra-cards);
                backdrop-filter: blur(5px);
                opacity: 0;
                translate: 60px 0px;
                transition: scale 0.5s ease, opacity 0.1s ease, translate 0.1s ease;

                .luz{
                    position: absolute;
                    width: var(--tamano-luz);
                    aspect-ratio: 1;
                    background-color: var(--color-luz-cards);
                    border-radius: 50%;
                    box-shadow: var(--sombra-luz-cards);
                    offset-path: content-box;
                    z-index: 50;
                    opacity: 0;
                }

                .marco{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    border: var(--borde-cards);
                    border-radius: var(--radio-grande);
                    z-index: -5;
                }

                .card-proyecto-vinculo{
                    display: flex;
                    flex-direction: column;
                    place-items: center;
                    place-content: center;
                    justify-content: space-around;
                    width: 100%;
                    height: 100%;
                    color: var(--color-enlaces-modal);

                    .card-proyecto-multimedia{
                        flex-shrink: 0;
                        position: relative;
                        width: 80%;
                        aspect-ratio: 1.777777;
                        border: var(--borde-cards-multimedia);
                        border-radius: var(--radio-mediano);
                        overflow: hidden;
                        filter: saturate(0);
                        transition: filter 0.5s ease;
                        
                        .miniatura{
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }

                        .miniatura-imagen{
                            opacity: 1;
                            transition: opacity 0.5s ease;
                        }

                        .miniatura-video{
                            opacity: 0;
                            transition: opacity 0.5s ease;
                        }
                    }

                    .card-proyecto-lista{
                        display: flex;
                        gap: 10px;
                        list-style: none;

                        .proyecto-lista-elemento{
                            width: var(--tamano-icono-tecnologias);
                            aspect-ratio: 1;

                            .icono{
                                width: 100%;
                                aspect-ratio: 1;
                                color: var(--color-iconos-tecnologias);

                                use{
                                    width: 100%;
                                    aspect-ratio: 1;
                                }

                                &:hover{
                                    scale: var(--escalado-grande);
                                    filter: drop-shadow(var(--sombras-iconos-tecnologias));
                                }
                            }
                        }
                    }
                }
                
                &:hover{
                    scale: var(--escalado-pequeno);
                    
                    .marco{
                        box-shadow: var(--sombra-cards-hover), var(--sombra-borde-cards);
                    }

                    .luz{
                        opacity: 1;
                        animation: recorridoLuz 3s linear infinite, destello-card 3s linear infinite;
                    }

                    .card-proyecto-multimedia{
                        filter: none;

                        .miniatura-imagen{
                            opacity: 0;
                        }

                        .miniatura-video{
                            opacity: 1;
                        }
                    }
                }

                &:active{
                    transition: none;
                    scale: var(--escalado-reduccion);
                    box-shadow: none;

                    .marco{
                        box-shadow: none;
                    }

                    .luz{
                        opacity: 0;
                    }

                    .card-proyecto-multimedia{
                        transition: none;
                        filter: saturate(0);
                        
                        .miniatura-imagen{
                            transition: none;
                            opacity: 1;
                        }

                        .miniatura-video{
                            transition: none;
                            opacity: 0;
                        }
                    }
                }
            }
        }
    }

    .seccion-proyectos.visible{

        #card_proyecto_spa{
            opacity: 1;
            translate: 0px 0px;
            transition: scale 0.5s ease, opacity 0.6s ease 0.6s, translate 0.6s ease 0.6s;
        }

        #card_proyecto_ecommerce{
            opacity: 1;
            translate: 0px 0px;
            transition: scale 0.5s ease, opacity 0.6s ease 0.9s, translate 0.6s ease 0.9s;
        }

        #card_proyecto_buscador{
            opacity: 1;
            translate: 0px 0px;
            transition: scale 0.5s ease, opacity 0.6s ease 1.2s, translate 0.6s ease 1.2s;
        }

        #card_proyecto_tresenraya{
            opacity: 1;
            translate: 0px 0px;
            transition: scale 0.5s ease, opacity 0.6s ease 1.5s, translate 0.6s ease 1.5s;
        }

        #card_proyecto_arkanoid{
            opacity: 1;
            translate: 0px 0px;
            transition: scale 0.5s ease, opacity 0.6s ease 1.8s, translate 0.6s ease 1.8s;
        }

        #card_proyecto_cajero{
            opacity: 1;
            translate: 0px 0px;
            transition: scale 0.5s ease, opacity 0.6s ease 2.1s, translate 0.6s ease 2.1s;
        }
    }

    /*----------------------SECCIÓN INFORMACIÓN--------------------------*/

    .seccion-informacion{

        .estructura-info{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 30px;
            width: 100%;
            max-width: 1500px;
            margin-top: 100px;
            padding: 0px 20px;

            .articulo-info{
                display: flex;
                flex-direction: column;
                flex: 0 1 400px;
                min-width: 320px;
                max-width: 400px;          

                .articulo-info-cabecera{
                    display: flex;
                    flex-direction: column;
                    place-items: center;
                    gap: 20px;

                    .articulo-info-titulo{
                        opacity: 0;
                        transition: opacity 0.1s ease;
                    }

                    .linea-decorativa-subtitulo{
                        height: 2px;
                        width: 100%;
                        background-color: var(--color-letras-titulo);
                        border-radius: 50%;
                        scale: 0 1;
                        transition: scale 0.1s ease;
                    }
                }

                .card-info{
                    display: flex;
                    flex-direction: column;
                    justify-content: left;
                    flex-grow: 1;
                    min-height: 600px;
                    margin-top: 50px;
                    padding: 20px;
                    border: var(--borde-stack);
                    border-radius: var(--radio-grande);
                    box-shadow: var(--sombra-stack);
                    backdrop-filter: blur(10px);
                    opacity: 0;
                    translate: 0px 120px;
                    transition: scale 0.5s ease, opacity 0.1s ease, translate 0.1s ease;

                    .parrafo-info{
                        line-height: 1.25;

                        &.inferior{
                            margin-top: auto;
                        }
                    }

                    .lista-formacion{
                        display: flex;
                        flex-direction: column;
                        gap: 20px;
                        margin-left: 25px;
                        list-style: none;

                        .elemento-formacion{
                            position: relative;

                            &::before{
                                position: absolute;
                                top: 0.15rem;
                                left: -2rem;
                                content: "";
                                width: var(--tamano-punto-stack);
                                aspect-ratio: 1;
                                background-color: var(--color-punto-stack);
                                border-radius: 50%;
                            }

                            .formacion-tiempo{
                                font-weight: 300;
                            }
                        }
                    }
                    
                    .lista-stack{
                        display: flex;
                        flex-direction: column;
                        gap: 10px;
                        margin-left: 25px;
                        list-style: none;

                        .apartado-stack{
                            display: flex;
                            flex-direction: column;
                            gap: 10px;

                            .stack-titulo{
                                position: relative;

                                &::before{
                                    position: absolute;
                                    top: 0.15rem;
                                    left: -2rem;
                                    content: "";
                                    width: var(--tamano-punto-stack);
                                    aspect-ratio: 1;
                                    background-color: var(--color-punto-stack);
                                    border-radius: 50%;
                                }
                            }

                            .sublista-stack{
                                display: flex;
                                flex-direction: row;
                                gap: 10px;
                                list-style: none;

                                .elemento-stack{
                                    width: var(--tamano-icono-stack);
                                    aspect-ratio: 1;

                                    .icono{
                                        width: 100%;
                                        height: 100%;
                                    }

                                    &:hover{
                                        scale: var(--escalado-grande);

                                        .icono{
                                            filter: drop-shadow(var(--sombra-iconos-stack));
                                        }
                                    }
                                }
                            }
                        }
                    }

                    &:hover{
                        scale: var(--escalado-pequeno);
                        box-shadow: var(--sombra-stack-hover);
                    }
                }
            }

            .separador-vertical{
                width: 50px;
                height: 750px;
                margin-top: 4rem;
                opacity: 0;
                translate: 0px -120px;
                scale: var(--proporcion-escalado);
                transition: opacity 0.1s ease, translate 0.1s ease;

                &#separador_vertical_derecho{
                    rotate: 180deg;
                    translate: 0px 120px;
                }
            }
        }
    }

    .seccion-informacion.visible{

        .estructura-info{

            .articulo-info{

                .articulo-info-cabecera{

                    .articulo-info-titulo{
                        opacity: 1;
                        transition: opacity 0.3s ease 0.6s;
                    }

                    .linea-decorativa-subtitulo{
                        scale: 1 1;
                        transition: scale 0.3s ease 0.9s;
                    }
                }

                .card-sobre-mi{
                    opacity: 1;
                    translate: 0px 0px;
                    transition: scale 0.5s ease, opacity 0.6s ease 1.2s, translate 0.6s ease 1.2s;
                }

                .card-formacion{
                    opacity: 1;
                    translate: 0px 0px;
                    transition: scale 0.5s ease, opacity 0.6s ease 1.5s, translate 0.6s ease 1.5s;
                }

                .card-stack{
                    opacity: 1;
                    translate: 0px 0px;
                    transition: scale 0.5s ease, opacity 0.6s ease 1.8s, translate 0.6s ease 1.8s;
                }
            }

            #separador_vertical_izquierdo{
                opacity: 1;
                translate: 0px 0px;
                transition: opacity 0.6s ease 2.1s, translate 0.6s ease 2.1s;
            }

            .separador-vertical#separador_vertical_derecho{
                opacity: 1;
                translate: 0px 0px;
                transition: opacity 0.6s ease 2.1s, translate 0.6s ease 2.1s;
            }
        }
    }

    /*----------------------SECCIÓN CONTACTO--------------------------*/

    .seccion-contacto{

        .articulo-contacto{
            display: flex;
            flex-direction: column;
            place-items: center;
            gap: 50px;
            width: 41.666666%;
            margin-top: 100px;

            .formulario-contacto{
                display: flex;
                flex-direction: column;
                place-items: center;
                gap: 15px;
                padding: 25px;
                width: 100%;
                max-width: 800px;
                min-width: 320px;
                border: var(--borde-contacto);
                border-radius: var(--radio-grande);
                box-shadow: var(--sombra-contacto);
                backdrop-filter: blur(10px);
                opacity: 0;
                translate: 0px -60px;
                transition: opacity 0.1s ease, translate 0.1s ease;

                .bloque-input{
                    display: flex;
                    flex-direction: column;
                    gap: 5px;
                    width: 80%;

                    .input-formulario,.textarea-formulario{
                        height: 2rem;
                        width: 100%;
                        background-color: var(--color-input);
                        padding: 10px;
                        border: var(--borde-input);
                        border-radius: var(--radio-mediano);
                        font-family: "ShulphurPoint";
                        font-size: 1rem;
                        font-weight: 400;
                        color: var(--color-letras-contenido);
                        box-shadow: var(--sombra-input);

                        &:focus{
                            border: var(--borde-input-activo);
                            box-shadow: var(--sombra-input-activo);
                        }
                    }

                    .textarea-formulario{
                        height: 10rem;
                    }
                }

                .boton-enviar{
                    position: relative;
                    width: var(--tamano-largo-boton-enviar);
                    height: var(--tamano-alto-boton-enviar);
                    padding: 3px;
                    background-color: transparent;
                    border: none;
                    border-radius: var(--radio-grande);
                    font-family: "ShulphurPoint";
                    font-size: 1rem;
                    font-weight: 400;
                    color: var(--color-letras-titulo);
                    box-shadow: var(--sombra-boton-enviar);
                    backdrop-filter: blur(10px);
                    cursor: pointer;

                    .luz-boton{
                        position: absolute;
                        width: var(--tamano-luz);
                        aspect-ratio: 1;
                        background-color: var(--color-luz-cards);
                        border-radius: 50%;
                        box-shadow: var(--sombra-luz-cards);
                        offset-path: content-box;
                        z-index: 50;
                        opacity: 0;
                    }

                    .marco-boton{
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        border: var(--borde-boton-enviar);
                        border-radius: var(--radio-grande);
                        z-index: -5;
                    }

                    &:hover{
                        scale: var(--escalado-pequeno);

                        .marco-boton{
                            box-shadow: var(--sombra-boton-enviar-hover), var(--sombra-borde-boton-enviar);
                        }

                        .luz-boton{
                            opacity: 1;
                            animation: recorridoLuz 1.5s linear infinite, destello-card 1.5s linear infinite;
                        } 
                    }

                    &:active{
                        scale: var(--escalado-reduccion);
                        box-shadow: none;

                        .marco-boton{
                            box-shadow: none;
                        }

                        .luz-boton{
                            opacity: 0;
                        }
                    }
                }
            }
        }

        .lista-contacto{
            display: flex;
            gap: 20px;
            list-style: none;
            opacity: 0;
            translate: 0px 60px;
            transition: opacity 0.1s ease, translate 0.1s ease;

            .lista-contacto-elemento{

                .icono{
                    width: var(--tamano-icono-contacto);
                    height: var(--tamano-icono-contacto);
                    color: var(--color-iconos-contacto);
                }

                &:hover{
                    scale: var(--escalado-grande);

                    .icono{
                        filter: drop-shadow(var(--sombra-iconos-contacto));
                    }
                }

                &:active{
                    scale: var(--escalado-reduccion);

                    .icono{
                        filter: none;
                    }
                }
            }
        }
    }

    .seccion-contacto.visible{

        .articulo-contacto{

            .formulario-contacto{
                opacity: 1;
                translate: 0px 0px;
                transition: opacity 0.3s ease 0.6s, translate 0.3s ease 0.6s;
            }

            .lista-contacto{
                opacity: 1;
                translate: 0px 0px;
                transition: opacity 0.3s ease 0.9s, translate 0.3s ease 0.9s;
            }
        }
    }
}

/*------------------------------------------------------------------------PIE DE PÁGINA-----------------------------------------------------------------------------------*/

.pie-pagina{
    position: relative;

    .marco-footer{
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        flex-direction: row;
        place-items: center;
        justify-content: space-between;
        width: 100%;
        height: var(--tamano-pie-pagina-alto);
        padding: 0 50px;
        background-color: var(--color-fondo-pie);
        border: var(--borde-pie);
        box-shadow: var(--sombra-pie);
        backdrop-filter: blur(2px);

        &::before{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 10px;
            content: "";
            backdrop-filter: brightness(3) saturate(3) contrast(3);
        }

        &::after{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 10px;
            content: "";
            backdrop-filter: brightness(2) saturate(2) contrast(2);
        }

        .boton-aviso-legal{
            background-color: transparent;
            font-family: "ShulphurPoint";
            font-size: 1rem;
            font-weight: 400;
            text-decoration: underline;
            color: var(--color-letras-titulo);
            border: none;
            box-shadow: none;
            cursor: pointer;

            &:hover{
                scale: var(--escalado-medio);
                text-shadow: var(--sombra-legal-pie);
            }

            &:active{
                scale: var(--escalado-reduccion);
                text-shadow: none;
            }
        }

        .copyright{

            .version-corta{
                display: none;
            }
        }

        .enlace-accesibilidad{
            color: var(--color-iconos-pie);
            height: var(--tamano-alto-icono-accesibilidad);

            .icono{
                width: var(--tamano-largo-icono-accesibilidad);
                height: var(--tamano-alto-icono-accesibilidad);
            }

            &:hover{
                scale: var(--escalado-medio);

                .icono{
                    filter: drop-shadow(var(--sombra-iconos-pie));
                }
            }

            &:active{
                scale: var(--escalado-reduccion);

                .icono{
                    filter: none;
                }
            }
        }
    }

    /*----------------------EFECTO REFLEXIÓN--------------------------*/

    .caja-reflectora{
        position: absolute;
        bottom: var(--tamano-pie-pagina-alto);
        left: 0;
        width: 100%;
        height: 1px;
        backdrop-filter: brightness(3);
    }

    /*----------------------------------------------MODAL LEGAL------------------------------------------------------*/

    .modal-legal{
        position: fixed;
        align-self: center;
        justify-self: center;
        width: 50%;
        height: 80%;
        background-color: var(--color-modal);
        border: var(--borde-modal);
        border-radius: var(--radio-grande);
        color: var(--color-letras-contenido);

        &::backdrop{
            backdrop-filter: blur(5px);
        }

        /*----------------------------------CABECERA----------------------------------------*/

        .legal-cabecera{
            position: sticky;
            top: 0;
            left: 0;
            width: 100%;
            height: var(--tamano-alto-navbar-modal);

            .boton-cerrar{
                position: absolute;
                top: 10px;
                right: 10px;
                place-items: center;
                width: var(--tamano-boton-modal);
                height: var(--tamano-boton-modal);
                background-color: var(--color-boton-modal);
                border: var(--borde-boton-modal);
                border-radius: var(--radio-mediano);
                box-shadow: var(--sombra-boton-modal);
                z-index: 30;

                .icono{
                    width: 100%;
                    height: 100%;
                    color: var(--color-x-modal);
                }

                &:hover{
                    scale: var(--escalado-pequeno);
                    box-shadow: var(--sombra-boton-modal-hover);

                    .icono{
                        stroke-width: 2;
                    }
                }

                &:active{
                    scale: var(--escalado-reduccion);
                    box-shadow: none;

                    .icono{
                        stroke-width: 1;
                    }
                }
            }

            .legal-navbar{
                width: 100%;
                height: 100%;
                background-color: var(--color-fondo-navbar);
                border: var(--borde-navbar);
                box-shadow: var(--sombra-navbar);
                backdrop-filter: blur(5px);

                &::before{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 10px;
                    content: "";
                    backdrop-filter: brightness(2) saturate(2) contrast(2);
                }

                &::after{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 10px;
                    content: "";
                    backdrop-filter: brightness(3) saturate(3) contrast(3);
                }

                .legal-lista{
                    display: flex;
                    flex-direction: row;
                    justify-content: space-around;
                    width: 90%;
                    height: 100%;
                    list-style: none;

                    .legal-lista-elemento{
                        place-content: center;

                        a{
                            color: var(--color-letras-titulo);
                        }

                        &:hover{
                            scale: var(--escalado-medio);
                            text-shadow: var(--sombra-enlaces-modal);
                        }

                        &:active{
                            scale: var(--escalado-reduccion);
                            text-shadow: none;
                        }
                    } 
                }
            }

            /*----------------------EFECTO REFLEXIÓN--------------------------*/

            .caja-reflectora{
                position: sticky;
                top: 0;
                width: 100%;
                height: 1px;
                backdrop-filter: brightness(5);
            }
        }

        /*----------------------------------CONTENIDO----------------------------------------*/

        .estructura-modal{
            display: flex;
            flex-direction: column;
            place-items: center;
            margin-top: 50px;

            .legal-titulo{
                text-decoration: underline;
            }

            .legal-seccion{
                display: flex;
                flex-direction: column;
                gap: 20px;
                padding: var(--tamano-alto-navbar-modal) 25px 0px 25px;
            }

            #legal_propiedad{
                margin-bottom: 4rem;
            }
        }
    }
}

/*------------------------------------------------------------------------ANIMACIONES-------------------------------------------------------------------------------------*/

@keyframes recorridoLuz{
    100%{
        offset-distance: 100%;
    }
}

@keyframes destello-card{
    56%{
        box-shadow: var(--sombra-luz-cards);
    }
    62%{
        box-shadow: var(--sombra-luz-cards-destello);
    }
    68%{
        box-shadow: var(--sombra-luz-cards);
    }
}

@keyframes pulso-portada-letras{
    60%{
        scale: none;
        text-shadow: none;
    }
    80%{
        scale: var(--escalado-pequeno);
        text-shadow: var(--sombra-letras);
    }
    100%{
        scale: none;
        text-shadow: none;
    }
}

@keyframes pulso-portada-foto{
    60%{
        scale: none;
        box-shadow: none;
    }
    80%{
        scale: var(--escalado-medio);
        box-shadow: var(--sombra-mascara), var(--sombra-mascara-hover);
    }
    100%{
        scale: none;
        box-shadow: none;
    }
}

@keyframes pulso-dialogo-configuracion{
    0%{
        box-shadow: var(--sombra-dialogo-configuracion);
    }
    50%{
        box-shadow: var(--sombra-dialogo-configuracion-pulso);
    }
}

@keyframes pulso-boton-configuracion{
    0%{
        scale: none;
    }
    50%{
        scale: var(--escalado-pequeno);
    }
}

@keyframes pulso-icono-configuracion{
    0%{
        stroke-width: 0.5px;
    }
    50%{
        stroke-width: 1px;
    }
}

@keyframes aparicion-tutorial{
    0%{
        opacity: 0;
    }
    75%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

/*==================================================================RESPONSIVE ESCRITORIO PEQUEÑO Y TABLET HORIZONTAL===================================================================================*/

@media screen and (max-width: 1370px){

    body{
        font-size: 1rem;

        h2{
            font-size: 1.5rem;
        }

        h3{
            font-size: 1.25rem;
        }
    }

    .cabecera{

        /*----------------------NAVBAR--------------------------*/

        .navbar{
            height: 50px;

            .navbar-lista{
                padding: 5px 20px;

                .navbar-elemento{
                    width: 42px;
                    height: 42px;

                }
            }

            &::before{
                height: 5px;
            }

            &::after{
                height: 5px;
            }
        }

        /*----------------------MENU OPCIONES--------------------------*/

        .configuracion-menu{
            top: 50px;
        }
    }

    /*------------------------------------------------------------------------MAIN-----------------------------------------------------------------------------------*/

    .principal{

        .seccion{

            .seccion-cabecera{
                top: 90px;
                gap: 10px;
            }

            .desplazamiento{
                width: 50px;
                height: 50px;

                &.retroceso{
                    top: 50px;
                }

                .flecha{
                    width: 50px;
                }
            }
        }

        /*----------------------SECCIÓN PROYECTOS--------------------------*/

        .seccion-proyectos{

            .estructura-cards{
                width: auto;
                max-width: 85%;
                height: auto;
                place-items: center;
                grid-template-columns: repeat(3,minmax(260px,1fr));
                gap: 20px;

                .card-proyecto{
                    width: clamp(260px,100%,400px);
                }
            }
        }

        /*----------------------SECCIÓN INFORMACIÓN--------------------------*/

        .seccion-informacion{

            .estructura-info{
                display: grid;
                grid-template-columns: 10fr 1fr 10fr 1fr;
                place-items: center;
                gap: 30px;
                width: 95%;
                margin-top: 150px;
                margin-bottom: 40px;

                .articulo-info{
                    margin-bottom: auto;          

                    .articulo-info-cabecera{
                        gap: 10px;
                    }

                    .card-info{
                        min-height: 520px;
                        margin-top: 25px;
                        margin-bottom: auto;
                        padding: 15px;

                        .lista-stack{
                            gap: 5px;
                        }
                    }
                }

                .separador-vertical{
                    width: 50px;
                    height: 550px;
                    margin-top: 1rem;
                    scale: none;
                }
            }
        }

        /*----------------------SECCIÓN CONTACTO--------------------------*/

        .seccion-contacto{

            .articulo-contacto{
                gap: 10px;
                width: 65%;
                height: auto;
                margin-top: 80px;

                .formulario-contacto{
                    gap: 10px;
                    padding: 15px;

                    .bloque-input{

                        .input-formulario,.textarea-formulario{
                            height: 1.75rem;
                            font-size: 0.9rem;
                        }

                        .textarea-formulario{
                            height: clamp(1.75rem,5vh,8rem);
                            padding: 5px 10px;
                        }
                    }

                    .boton-enviar{
                        font-size: 0.9rem;
                    }
                }
            }
        }
    }

    /*------------------------------------------------------------------------PIE DE PÁGINA-----------------------------------------------------------------------------------*/

    .pie-pagina{

        .marco-footer{
            height: 50px;
            padding: 5px 50px;
        }

        /*----------------------EFECTO REFLEXIÓN--------------------------*/

        .caja-reflectora{
            bottom: 50px;
        }

        /*----------------------------------------------MODAL LEGAL------------------------------------------------------*/

        .modal-legal{
            width: 80%;
        }
    }
}

/*================================================================================RESPONSIVE TABLET VERTICAL================================================================================*/

@media screen and (max-width: 950px){
    body{
        font-size: 1rem;

        h2{
            font-size: 1.5rem;
        }

        h3{
            font-size: 1.25rem;
        }
    }

    .cabecera{

        /*----------------------NAVBAR--------------------------*/

        .navbar{
            height: 50px;

            .navbar-lista{
                padding: 5px 20px;

                .navbar-elemento{
                    width: 42px;
                    height: 42px;

                }
            }

            &::before{
                height: 5px;
            }

            &::after{
                height: 5px;
            }
        }

        /*----------------------MENU OPCIONES--------------------------*/

        .configuracion-menu{
            top: 50px;
        }
    }

    /*------------------------------------------------------------------------MAIN-----------------------------------------------------------------------------------*/

    .principal{

        .seccion{

            .seccion-cabecera{
                top: 100px;
                gap: 10px;
            }

            .desplazamiento{
                width: 50px;
                height: 50px;

                &.retroceso{
                    top: 50px;
                }

                .flecha{
                    width: 50px;
                }
            }
        }

        /*----------------------SECCIÓN PORTADA--------------------------*/

        .seccion-portada{

            .estructura-portada{
                flex-direction: column;

                .seccion-presentacion{
                    place-items: center;
                }
            }
        }

        /*----------------------SECCIÓN PROYECTOS--------------------------*/

        .seccion-proyectos{

            .estructura-cards{
                width: auto;
                max-width: 95%;
                height: auto;
                place-items: center;
                grid-template-columns: repeat(2,minmax(230px,1fr));
                gap: 20px;

                .card-proyecto{
                    width: clamp(230px,100%,400px);
                    
                    .card-proyecto-vinculo{

                        .card-proyecto-titulo{
                            font-size: 1rem;
                        }
                    }
                }
            }
        }

        /*----------------------SECCIÓN INFORMACIÓN--------------------------*/

        .seccion-informacion{
            overflow-x: hidden;

            .estructura-info{
                display: flex;
                flex-direction: column;
                place-items: center;
                gap: 30px;
                margin-top: 180px;
                margin-bottom: 60px;

                .articulo-info{         

                    .card-info{
                        min-height: 550px;
                        margin-top: 30px;
                    }
                }

                .separador-vertical{
                    width: 50px;
                    height: 500px;
                    margin: -200px;
                    scale: none;
                    rotate: -90deg;
                    translate: -60px 0px;

                    &#separador_vertical_derecho{
                        rotate: 90deg;
                        translate: 60px 0px;
                    }
                }
            }
        }

        /*----------------------SECCIÓN CONTACTO--------------------------*/

        .seccion-contacto{

            .articulo-contacto{
                gap: 25px;
                width: 75%;
                height: auto;
                margin-top: 0px;

                .formulario-contacto{

                    .bloque-input{

                        .input-formulario,.textarea-formulario{
                            height: 1.75rem;
                            font-size: 0.9rem;
                        }

                        .textarea-formulario{
                            height: clamp(6rem,5vh,8rem);
                        }
                    }
                }
            }
        }
    }

    /*------------------------------------------------------------------------PIE DE PÁGINA-----------------------------------------------------------------------------------*/

    .pie-pagina{

        .marco-footer{
            padding: 5px 25px;

            .copyright{

                .version-corta{
                    display: block;
                }

                .version-larga{
                    display: none;
                }
            }
        }
    }
}

/*======================================================================================RESPONSIVE MÓVIL====================================================================================*/

@media screen and (max-width: 550px){

    body{
        font-size: 1rem;

        h2{
            font-size: 1.5rem;
        }

        h3{
            font-size: 1.25rem;
        }
    }

    .cabecera{

        /*----------------------NAVBAR--------------------------*/

        .navbar{
            width: 100%;

            .navbar-lista{
                gap: 20px;
                width: 100%;
                padding: 5px 5px;
            }
        }

        /*----------------------DIALOGO CONFIGURACIÓN--------------------------*/

        .dialogo-configuracion{
            right: 52px;
            backdrop-filter: blur(10px);
        }
    }

    /*------------------------------------------------------------------------MAIN-----------------------------------------------------------------------------------*/

    .principal{

        .seccion{
            width: 100%;

            .seccion-cabecera{
                top: 100px;
                gap: 10px;

                .linea-decorativa-titulo{
                    width: 85%;
                }
            }
        }

        /*----------------------SECCIÓN PORTADA--------------------------*/

        .seccion-portada{

            .estructura-portada{
                flex-direction: column;
                gap: 25px;

                .seccion-presentacion{
                    place-items: center;

                    .titulo-principal{
                        text-align: center;
                        font-size: 3rem;
                    }

                    .subtitulo-principal{
                        font-size: 1.5rem;
                    }
                }
            }
        }

        /*----------------------SECCIÓN PROYECTOS--------------------------*/

        .seccion-proyectos{
            overflow-x: hidden;

            .estructura-cards{
                display: flex;
                flex-direction: column;
                width: 80%;
                margin-top: 180px;
                margin-bottom: 60px;
            }
        }

        /*----------------------SECCIÓN INFORMACIÓN--------------------------*/

        .seccion-informacion{
            overflow-x: hidden;

            .estructura-info{
                display: flex;
                flex-direction: column;
                place-items: center;
                gap: 30px;
                width: 100%;
                margin-top: 180px;
                margin-bottom: 60px;

                .articulo-info{
                    padding: 0px 20px;        

                    .card-info{
                        min-height: auto;
                    
                        .lista-stack{

                            .apartado-stack{

                                .sublista-stack{
                                    gap: 8px;

                                    .elemento-stack{
                                        width: 28px;
                                    }
                                }
                            }
                        }
                    }
                }

                .separador-vertical{
                    width: 50px;
                    height: calc(100vw - 20px);
                    margin: -100px;  
                }
            }
        }

        /*----------------------SECCIÓN CONTACTO--------------------------*/

        .seccion-contacto{

            .articulo-contacto{
                gap: 25px;
                width: 100%;
                height: auto;
                margin-top: 180px;
                margin-bottom: 80px;

                .formulario-contacto{
                    min-width: 0px;
                    max-width: 90%;

                    .bloque-input{
                        width: 90%;

                        .input-formulario,.textarea-formulario{
                            height: 1.75rem;
                            font-size: 0.9rem;
                        }

                        .textarea-formulario{
                            height: clamp(6rem,5vh,8rem);
                        }
                    }
                }
            }
        }
    }

    /*------------------------------------------------------------------------PIE DE PÁGINA-----------------------------------------------------------------------------------*/

    .pie-pagina{

        .marco-footer{
            gap: 10px;
            padding: 5px 5px;

            .copyright{
                font-size: 0.75rem;
                text-align: center;
            }
        }

        .modal-legal{
            width: 90%;
            height: 90%;

            /*----------------------------------CABECERA----------------------------------------*/

            .legal-cabecera{

                .legal-navbar{

                    .legal-lista{
                        gap: 10px;
                        width: 80%;

                        .legal-lista-elemento{

                            a{
                                font-size: 0.75rem;
                            }
                        } 
                    }
                }
            }

            /*----------------------------------CONTENIDO----------------------------------------*/

            .estructura-modal{

                .legal-seccion{
                    padding: var(--tamano-alto-navbar-modal) 15px 0px 15px;
                }
            }
        }
    }
}

/*==================================================================================RESPONSIVE MÓVIL HORIZONTAL================================================================================*/

@media screen and (max-height: 450px){

    .cabecera{

        /*----------------------DIALOGO CONFIGURACIÓN--------------------------*/

        .dialogo-configuracion{
            backdrop-filter: blur(10px);
        }
    }

    /*------------------------------------------------------------------------MAIN-----------------------------------------------------------------------------------*/

    .principal{

        /*----------------------SECCIÓN PORTADA--------------------------*/

        .seccion-portada{

            .estructura-portada{
                margin-top: 100px;
                margin-bottom: 60px;
            }
        }

        /*----------------------SECCIÓN PROYECTOS--------------------------*/

        .seccion-proyectos{
            overflow-x: hidden;

            .estructura-cards{
                margin-top: 180px;
                margin-bottom: 60px;
            }
        }

        /*----------------------SECCIÓN CONTACTO--------------------------*/

        .seccion-contacto{

            .articulo-contacto{
                width: 100%;
                height: auto;
                margin-top: 180px;
                margin-bottom: 80px;

                .formulario-contacto{
                    min-width: 0px;
                    max-width: 90%;

                    .bloque-input{
                        width: 90%;

                        .input-formulario,.textarea-formulario{
                            height: 1.75rem;
                            font-size: 0.9rem;
                        }

                        .textarea-formulario{
                            height: clamp(6rem,5vh,8rem);
                        }
                    }
                }
            }
        }
    }

    /*------------------------------------------------------------------------PIE DE PÁGINA-----------------------------------------------------------------------------------*/

    .pie-pagina{

        .marco-footer{
            padding: 5px 15px;
        }

        .modal-legal{
            width: 90%;
            height: 90%;

            /*----------------------------------CABECERA----------------------------------------*/

            .legal-cabecera{

                .legal-navbar{

                    .legal-lista{
                        width: 90%;

                        .legal-lista-elemento{

                            a{
                                font-size: 1rem;
                            }
                        } 
                    }
                }
            }
        }
    }
}