@import url("https://use.typekit.net/niz6rga.css");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://use.typekit.net/yxr5rij.css"); /* CODE SAVER */
@import url("https://use.typekit.net/yxr5rij.css"); /*LORA*/
@import url("https://use.typekit.net/yxr5rij.css"); /* ABHAYA LIBRE */






body, html {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(255, 255, 255);
        scroll-behavior: smooth; 
        cursor: url('../images/Criss.png') 16 16, crosshair;
        box-sizing: border-box;
    
}

a, button {
    cursor: url('../images/Cross.png') 16 16, crosshair;
}

    
body, html {
    scrollbar-width: none; 
}

body::-webkit-scrollbar,
html::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none;
}

.works a {
  color: inherit;
  text-decoration: none;
}

.about {
        background-color: rgba(242, 241, 241, 1); 
    }


/*=====================================*//* ESTILOS PARA ORDENADOR */
@media (min-width: 1025px) {

    


    .cross-grid {
        position: fixed;
        top: -0.7rem; 
        left: -0.3rem;
        width: calc(100vw + 1rem);   
        height: calc(100vh + 1.3rem);  
        display: grid;
        grid-template-columns: repeat(6, 1fr); 
        grid-template-rows: repeat(4, 1fr);
        z-index: 100;
        pointer-events: none;
        opacity: 0.50;
        font-size: 1.2rem;
        font-family: monospace;
        color: rgba(216, 204, 254, 1);
        text-align: center;
        align-items: start;
        justify-items: start;
    }








    
    .home {
        position: fixed;
        top: 4rem;
        right: 5rem;
        font-size: 20px;
        font-family: "code-saver", sans-serif;
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        color: rgba(234, 63, 63, 1);
        z-index: 1000;
        display: inline-flex;
        align-items: center;
        gap: 0.1rem;
        transition: color 0.3s ease;
    }

        
    .home-text {
        transition: none; /* no se mueve */
    }

        
    .paren {
        display: inline-block;
        transition: transform 0.3s ease;
    }

    
    .home:hover .left-paren {
        transform: translateX(-0.3rem);
    }

    .home:hover .right-paren {
        transform: translateX(0.3rem);
    }

    .home:hover {
        color: rgba(216, 204, 254, 1);
    }






/* BARRA DE NAVEGACIÓN */
    .nav {
        position: fixed;
        top: 2rem;
        z-index: 1000;
    }

    .navegation {
        background-color: rgba(255, 255, 255, 0);
        display: block;
        padding-left: 1rem;
        padding-top: 0rem;
        z-index: 1000;
    }

    .navegation li {
        background-color: rgba(255, 255, 255, 0);
        list-style-type: none;
        margin-bottom: -2rem;
        position: relative;
        z-index: 1000;
    }

    .navegation li a {
        font-size: 15px;
        font-family: "code-saver", sans-serif;
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        display: inline-block;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        padding: 1.2rem;
        vertical-align: middle;
        transition: transform 0.3s ease;
        z-index: 1000;
    }


    .navegation li a.active,
    .navegation li a:hover {
        color: rgba(216, 204, 254, 1);
        transition: transform 0.8s ease;
        transform: translateX(20px); 
    }


    :root {
        --nav-normal-color: rgba(234, 63, 63, 1); 
        --nav-highlight-color: rgba(216, 204, 254, 1);
    }

    .navegation li a {
        color: var(--nav-normal-color);
        transition: color 0s ease;
    }


    /*Efecto maquina de escribir*/

    .navegation .initial {
        opacity: 1;
        display: inline-block;
        vertical-align: middle;
        z-index: 1000;
    }

    .navegation .reveal {
        opacity: 1;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        border-right: 2px solid black; 
        width: 0; 
        vertical-align: middle;
        animation: typing 1s steps(10, end) forwards, blink-caret 0.3s step-end infinite;
        z-index: 1000;
    }

    @keyframes typing {
        from { width: 0; }
        to { width: 90%; }
    }

    @keyframes blink-caret {
        from, to { border-color: transparent; }
        100% { border-color: black; }
    }





    #home {
        background-image: url('../images/flor\,\ fondo\ blanco.gif');
        
        background-size: cover;       
        background-repeat: no-repeat;
        background-position: center;
        height: 100vh;                  
        position: relative;
        z-index: 1;
    }

    



    /* ABOUT ME */

    .about {
        padding-bottom: 20rem;
        height: 30rem;
        width: 100%;
        margin-top: 0rem; 
        z-index: 2; 
        position: relative; 
    }

    .about a {
        font-size: 30px;
        font-family: "code-saver", sans-serif;
        font-weight: 400;
        font-style: normal;
        padding-left: 40rem;
        color: rgba(234, 63, 63, 1);
        position: absolute;
        top: 10rem;
    }

    .about p {
        font-size: 18px;
        font-family: "abhaya-libre", sans-serif;
        font-weight: 400;
        font-style: normal;
        width: 35rem;
        padding-left: 40rem;
        color: rgba(56, 55, 55, 1);
        position: absolute;
        top: 14rem;
    }

    .mifoto {
        width: 280px;
        padding-left: 8rem;
        position: absolute;
        top: 2rem;
        left: 10rem;
    }





    /* WORKS */

    .works {
        background-color:rgb(255, 255, 255);
        height: 130rem; 
        padding: 0rem;
        width: 100%;
        margin-top: 0rem; 
        z-index: 2; 
        position: relative; 
        position: relative;
    }

    .works h2 {
        font-size: 250px;
        font-family: "code-saver", sans-serif;
        font-weight: 400;
        color: rgba(234, 63, 63, 1);
        font-style: normal;
        font-style: normal;
        margin-top: 0%;
        position: absolute;
        top: 4rem;
        left: 30rem;
    }


    .work1 {
        width: 300px;
        position: absolute;
        top: 30rem;
        left: 20rem;
    }

    .description1{
        font-size: 18px;
        font-family: "code-saver", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgba(234, 63, 63, 1);
        position: absolute;
        top: 30rem;
        left: 40rem;
        text-decoration: none;
    }

    .description1 p{
        margin-top: -1rem;
        font-size: 20px;
        font-family: "abhaya-libre", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgba(56, 55, 55, 1);
    }



    .work2 {
        width: 250px;
        position: absolute;
        top: 45rem;
        left: 40rem;
    }

    .description2{
        font-size: 18px;
        font-family: "code-saver", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgba(234, 63, 63, 1);
        position: absolute;
        top: 45rem;
        left: 57rem;
    }

    .description2 p{
        margin-top: -1rem;
        font-size: 20px;
        font-family: "abhaya-libre", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgba(56, 55, 55, 1);
    }



    .work3 {
        width: 300px;
        position: absolute;
        top: 62rem;
        left: 20rem;
    }

    .description3{
        font-size: 18px;
        font-family: "code-saver", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgba(234, 63, 63, 1);
        position: absolute;
        top: 75rem;
        left: 40rem;
    }

    .description3 p{
        margin-top: -1rem;
        font-size: 20px;
        font-family: "abhaya-libre", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgba(56, 55, 55, 1);
    }




    .work4 {
        width: 300px;
        position: absolute;
        top: 85rem;
        left: 65rem;
    }

    .description4{
        font-size: 18px;
        font-family: "code-saver", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgba(234, 63, 63, 1);
        font-family: "droid-sans-mono", monospace;
        font-weight: 600;
        font-style: normal;
        text-align: end;
        position: absolute;
        top: 90rem;
        left: 52rem;
    }

    .description4 p{
        margin-top: -1rem;
        font-size: 20px;
        font-family: "abhaya-libre", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgba(56, 55, 55, 1);
    }



    .work5 {
        width: 250px;
        position: absolute;
        top: 100rem;
        left: 48rem;
    }

    .description5{
        font-size: 18px;
        font-family: "code-saver", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgba(234, 63, 63, 1);
        text-align: end;
        position: absolute;
        top: 110rem;
        left: 38rem;
    }

    .description5 p{
        margin-top: -1rem;
        font-size: 20px;
        font-family: "abhaya-libre", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgba(56, 55, 55, 1);
    }





    .fade-in {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease, transform 0.8s ease;
    }

   
    .fade-in.active {
        opacity: 1;
        transform: translateY(0);
    }




    /* CONTACT */

    .contact {
        background-color: rgba(234, 63, 63, 1);
        height: 45rem;
        padding-top: 2rem;
        margin-top: 0;
        position: relative;
        z-index: 2;
        width: 100%;
        color: rgba(216, 204, 254, 1);
        font-family: "droid-sans-mono", monospace;
    }

    .contact-title-group {
        width: 100%;
        margin-top: 39rem; 
        text-align: right; 
        position: absolute;
        right: 5rem; 
    }

    .contact-title-group .contact-line {
        width: 20%;
        height: 1px;
        background-color: rgba(216, 204, 254, 1);
        margin: 0 0 0 auto; 
        position: static; 
    }

    .contact-title-group h2 {
        font-size: 15px;
        font-weight: 400;
        font-style: normal;
        margin: 0.5rem 0 0 0; /* Espacio pequeño entre línea y texto */
        color: rgba(216, 204, 254, 1);
        padding-right: 13rem; /* Espacio a la derecha */
        position: static; /* Quita absolute */
        transition: font-style 0.1s ease;
    }

       
    .contact-info {
        position: absolute;
        top: 30rem;
        right: 7rem;
        text-align: right;
        font-size: 15px;
        line-height: 1.4;
    }


    .contact h2 .arrow {
        margin-left: 10px;
    }

    .contact h2:hover {
        font-style: italic;
    }

       
    .social-links {
        position: absolute;
        bottom: 5rem;
        left: 3rem;
        font-size: 15px;
        letter-spacing: 1px;
    }

    .social-links a {
        color: rgba(216, 204, 254, 1);
        text-decoration: none;
        transition: color 0.3s ease;
    }


    .c-link {
        pointer-events: auto;
        display: inline-block;
        position: relative;
    }

    .c-link::before {
        content: "";
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        height: 1.4px;
        background-color: currentColor;
        transform: scaleX(0);
        transform-origin: right center;
        transition: transform .3s cubic-bezier(0.38, 0.005, 0.215, 1)
    }

    .c-link:hover::before {
        transform: scaleX(1);
        transform-origin: left center
    }


    
    .corner-arrow {
        position: fixed;
        right: 6rem;
        bottom: 3.5rem;
        z-index: 1000; 
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
        transition: transform 0.3s cubic-bezier(.4,2,.6,1);
    }

}





















































/*=====================================*//* ESTILOS PARA TÁBLET */

@media (min-width: 768px) and (max-width: 1024px) {
    
     body, html {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        scroll-behavior: smooth; 
        cursor: url('../images/Criss.png') 16 16, crosshair;
        box-sizing: border-box;
    
    }

    a, button {
        cursor: url('../images/Cross.png') 16 16, crosshair;
    
    }

    
    body, html {
        scrollbar-width: none; 
    }

    body::-webkit-scrollbar,
    html::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none;
    }


    .cross-grid {
        position: fixed;
        top: -0.7rem; 
        left: -0.3rem;
        width: calc(100vw + 1rem);  
        height: calc(100vh + 1.3rem);  
        display: grid;
        grid-template-columns: repeat(6, 1fr); 
        grid-template-rows: repeat(4, 1fr);
        z-index: 100;
        pointer-events: none;
        opacity: 0.50;
        font-size: 1.2rem;
        font-family: monospace;
        color: rgba(216, 204, 254, 1);
        text-align: center;
        align-items: start;
        justify-items: start;
    }

    

    
    .home {
        position: fixed;
        top: 4rem;
        right: 5rem;
        font-size: 20px;
        font-family: "code-saver", sans-serif;
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        color: rgba(234, 63, 63, 1);
        z-index: 1000;
        display: inline-flex;
        align-items: center;
        gap: 0.1rem;
        transition: color 0.3s ease;
    }

    
    .home-text {
        transition: none; 
    }

    
    .paren {
        display: inline-block;
        transition: transform 0.3s ease;
    }

    
    .home:hover .left-paren {
        transform: translateX(-0.3rem);
    }

    .home:hover .right-paren {
        transform: translateX(0.3rem);
    }

    .home:hover {
        color: rgba(216, 204, 254, 1);
    }






    /* BARRA DE NAVEGACIÓN */

    .nav {
        position: fixed;
        top: 2rem;
        left: 0;
        z-index: 1000;
    }

    .navegation {
        background-color: rgba(255, 255, 255, 0);
        display: block;
        padding-left: 1rem;
        padding-top: 0rem;
        z-index: 1000;
    }

    .navegation li {
        background-color: rgba(255, 255, 255, 0);
        list-style-type: none;
        margin-bottom: -2rem;
        position: relative;
        z-index: 1000;
    }

    .navegation li a {
        font-size: 15px;
        font-family: "code-saver", sans-serif;
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        display: inline-block;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        padding: 1.2rem;
        vertical-align: middle;
        transition: transform 0.3s ease;
        z-index: 1000;
    }


    .navegation li a.active,
    .navegation li a:hover {
        color: rgba(216, 204, 254, 1);
        transition: transform 0.8s ease;
        transform: translateX(20px); 
    }


    :root {
        --nav-normal-color: rgba(234, 63, 63, 1); 
        --nav-highlight-color: rgba(216, 204, 254, 1); 
    }

    .navegation li a {
        color: var(--nav-normal-color);
        transition: color 0.3s ease;
    }



    /*Efecto maquina de escribir*/

    .navegation .initial {
        opacity: 1;
        display: inline-block;
        vertical-align: middle;
        z-index: 1000;
    }

    .navegation .reveal {
        opacity: 1;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        border-right: 2px solid black;
        width: 0; 
        vertical-align: middle;
        animation: typing 1s steps(10, end) forwards, blink-caret 0.3s step-end infinite;
        z-index: 1000;
    }

    @keyframes typing {
        from { width: 0; }
        to { width: 90%; }
    }

    @keyframes blink-caret {
        from, to { border-color: transparent; }
        100% { border-color: black; }
    }







    #home {
        background-image: url('../images/flor\,\ fondo\ blanco.gif');
        background-size: cover;       
        background-repeat: no-repeat;
        background-position: center;
        height: 100vh;                   
        position: relative;
        z-index: 1;
    }


    

    /* ABOUT ME */

    .about {
        padding-bottom: 20rem;
        height: 55rem;
        width: 100%;
        margin-top: 0rem; 
        z-index: 2;
        position: relative; 
    }

    .about a {
        font-size: 20px;
        font-family: "code-saver", sans-serif;
        font-weight: 400;
        font-style: normal;
        padding-left: 40rem;
        color: rgba(234, 63, 63, 1);
        position: absolute;
        top: 38rem;
        right: 36rem;
    }

    .about p {
        font-size: 16px;
        font-family: "abhaya-libre", sans-serif;
        font-weight: 200;
        font-style: normal;
        width: 30rem;
        color: rgba(56, 55, 55, 1);
        position: absolute;
        top: 40rem;
        right:10rem;
    }

    .mifoto {
        width: 250px;
        padding-left: 8rem;
        position: absolute;
        top: -30rem;
        left: 40rem;
    }




     /* WORKS */

    .works {
        background-color:rgba(242, 241, 241, 1);
        height: 130rem;
        padding: 0rem;
        width: 100%;
        margin-top: 0rem;
        z-index: 2; 
        position: relative; 
        position: relative; 
    }

    .works h2 {
        font-size: 150px;
        font-family: "code-saver", sans-serif;
        font-weight: 400;
        color: rgba(234, 63, 63, 1);
        font-style: normal;
        font-style: normal;
        margin-top: 0%;
        position: absolute;
        top: 4rem;
        left: 12rem;
    }


    .work1 {
        width: 180px;
        position: absolute;
        top: 30rem;
        left: 10rem;
    }

    .description1{
        font-size: 18px;
        font-family: "code-saver", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgba(234, 63, 63, 1);
        position: absolute;
        top: 30rem;
        left: 22rem;
    }

    .description1 p{
        margin-top: -1rem;
        font-size: 20px;
        font-family: "abhaya-libre", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgba(56, 55, 55, 1);
    }



    .work2 {
        width: 180px;
        position: absolute;
        top: 45rem;
        left: 23rem;
    }

    .description2{
        font-size: 18px;
        font-family: "code-saver", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgba(234, 63, 63, 1);
        position: absolute;
        top: 45rem;
        left: 35rem;
    }

    .description2 p{
        margin-top: -1rem;
        font-size: 20px;
        font-family: "abhaya-libre", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgba(56, 55, 55, 1);
    }



    .work3 {
        width: 180px;
        position: absolute;
        top: 54rem;
        left: 10rem;
    }

    .description3{
        font-size: 18px;
        font-family: "code-saver", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgba(234, 63, 63, 1);
        position: absolute;
        top: 62rem;
        left: 22rem;
    }

    .description3 p{
        margin-top: -1rem;
        font-size: 20px;
        font-family: "abhaya-libre", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgba(56, 55, 55, 1);
    }




    .work4 {
        width: 180px;
        position: absolute;
        top: 80rem;
        left: 35rem;
    }

    .description4{
        font-size: 18px;
        font-family: "code-saver", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgba(234, 63, 63, 1);
        font-family: "droid-sans-mono", monospace;
        font-weight: 600;
        font-style: normal;
        text-align: end;
        position: absolute;
        top: 88rem;
        left: 24rem;
    }

    .description4 p{
        margin-top: -1rem;
        font-size: 20px;
        font-family: "abhaya-libre", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgba(56, 55, 55, 1);
    }



    .work5 {
        width: 180px;
        position: absolute;
        top: 95rem;
        left: 22rem;
    }

    .description5{
        font-size: 18px;
        font-family: "code-saver", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgba(234, 63, 63, 1);
        text-align: end;
        position: absolute;
        top: 100rem;
        left: 13rem;
    }

    .description5 p{
        margin-top: -1rem;
        font-size: 20px;
        font-family: "abhaya-libre", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgba(56, 55, 55, 1);
    }



    .fade-in {
        opacity: 0;
        transform: translateY(20px); 
        transition: opacity 0.6s ease, transform 0.8s ease;
    }


    .fade-in.active {
        opacity: 1;
        transform: translateY(0);
    }




    
    /* CONTACT */

    .contact {
        background-color:rgba(234, 63, 63, 1);
        height: 75rem;
        padding-top: 2rem;
        margin-top: 0;
        position: relative;
        z-index: 2;
        width: 100%;
        color: rgba(216, 204, 254, 1);
        font-family: "droid-sans-mono", monospace;
    }

    .contact-title-group {
        width: 100%;
        margin-top: 39rem;
        text-align: right; 
        position: absolute;
        right: 6rem;
    }

    .contact-title-group .contact-line {
        width: 20%;
        height: 1px;
        background-color: rgba(216, 204, 254, 1);
        margin: 0 0 0 auto; 
        position: static; 
    }

    .contact-title-group h2 {
        font-size: 15px;
        font-weight: 400;
        font-style: normal;
        margin: 0.5rem 0 0 0; 
        color: rgba(216, 204, 254, 1);
        padding-right: 4rem; 
        position: static; 
        transition: font-style 0.1s ease;
    }

    
    .contact-info {
        position: absolute;
        top: 30rem;
        right: 7rem;
        text-align: right;
        font-size: 12px;
        line-height: 1.4;
    }


    .contact h2 .arrow {
        margin-left: 10px;
    }

    .contact h2:hover {
        font-style: italic;
    }

    
    .social-links {
        position: absolute;
        bottom: 5rem;
        left: 3rem;
        font-size: 12px;
        letter-spacing: 1px;
    }

    .social-links a {
        color: rgba(216, 204, 254, 1);
        text-decoration: none;
        transition: color 0.3s ease;
    }



    .corner-arrow {
        position: fixed;
        right: 6rem;
        bottom: 3.5rem;
        z-index: 1000; 
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
        transition: transform 0.3s cubic-bezier(.4,2,.6,1);
    }


}























/*=====================================*//* ESTILOS PARA MÓVIL */

@media (max-width: 768px) {



      body, html {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        scroll-behavior: smooth; 
        cursor: url('../images/Criss.png') 16 16, crosshair;
        box-sizing: border-box;
    
    }

    a, button {
        cursor: url('../images/Cross.png') 16 16, crosshair;
    
    }

    
    body, html {
        scrollbar-width: none; 
    }

    body::-webkit-scrollbar,
    html::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none;
    }


    .cross-grid {
        position: fixed;
        top: -0.7rem; 
        left: -0.3rem;
        width: calc(100vw + 1rem);  
        height: calc(100vh + 1.3rem); 
        display: grid;
        grid-template-columns: repeat(4, 1fr); 
        grid-template-rows: repeat(7, 1fr);
        z-index: 100;
        pointer-events: none;
        opacity: 0.50;
        font-size: 1.2rem;
        font-family: monospace;
        color: rgba(216, 204, 254, 1);
        text-align: center;
        align-items: start;
        justify-items: start;
    }

    

    
    .home {
        position: fixed;
        top: 4rem;
        right: 2rem;
        font-size: 20px;
        font-family: "code-saver", sans-serif;
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        color: rgba(234, 63, 63, 1);
        z-index: 1000;
        display: inline-flex;
        align-items: center;
        gap: 0.1rem;
        transition: color 0.3s ease;
    }

    
    .home-text {
        transition: none; 
    }

   
    .paren {
        display: inline-block;
        transition: transform 0.3s ease;
    }

   
    .home:hover .left-paren {
        transform: translateX(-0.3rem);
    }

    .home:hover .right-paren {
        transform: translateX(0.3rem);
    }

    .home:hover {
        color: rgba(216, 204, 254, 1);
    }






    /* BARRA DE NAVEGACIÓN */

    .nav {
        position: fixed;
        top: 2rem;
        left: 0;
        z-index: 1000;
    }

    .navegation {
        background-color: rgba(255, 255, 255, 0);
        display: block;
        padding-left: 1rem;
        padding-top: 0rem;
        z-index: 1000;
    }

    .navegation li {
        background-color: rgba(255, 255, 255, 0);
        list-style-type: none;
        margin-bottom: -2rem;
        position: relative;
        z-index: 1000;
    }

    .navegation li a {
        font-size: 15px;
        font-family: "code-saver", sans-serif;
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        display: inline-block;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        padding: 1.2rem;
        vertical-align: middle;
        transition: transform 0.3s ease;
        z-index: 1000;
    }


    .navegation li a.active,
    .navegation li a:hover {
        color: rgba(216, 204, 254, 1);
        transition: transform 0.8s ease;
        transform: translateX(20px); 
    }


   
    :root {
    --nav-normal-color: rgba(234, 63, 63, 1); 
    --nav-highlight-color: rgba(255, 243, 161, 1); 
    }

    .navegation li a {
        color: var(--nav-normal-color);
        transition: color 0.3s ease;
    }



    

    .navegation .initial {
        opacity: 1;
        display: inline-block;
        vertical-align: middle;
        z-index: 1000;
    }

    .navegation .reveal {
        opacity: 1;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        border-right: 2px solid black; 
        width: 0; 
        vertical-align: middle;
        animation: typing 1s steps(10, end) forwards, blink-caret 0.3s step-end infinite;
        z-index: 1000;
    }

    @keyframes typing {
        from { width: 0; }
        to { width: 90%; }
    }

    @keyframes blink-caret {
        from, to { border-color: transparent; }
        100% { border-color: black; }
    }







    #home {
        background-image: url('../images/flor\,\ fondo\ blanco.gif');
        background-size: cover;       
        background-repeat: no-repeat;
        background-position: center;
        height: 100vh;                  
        position: relative;
        z-index: 1;
    }







    

    /* ABOUT ME */

    .about {
        padding-bottom: 20rem;
        height: 55rem;
        width: 100%;
        margin-top: 0rem; 
        z-index: 2; 
        position: relative; 
    }

    .about a {
        font-size: 32px;
        font-family: "code-saver", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgba(234, 63, 63, 1);
        position: absolute;
        top: 30rem;
        left: 30%;
        right: auto;
        padding-left: 0;
        transform: translateX(-50%);
        text-align: left;
    }

     .about p {
        font-size: 16px;
        font-family: "abhaya-libre", sans-serif;
        font-weight: 400;
        font-style: normal;
        text-align: left;
        width: 70vw;
        max-width: 22rem;
        color: rgba(56, 55, 55, 1);
        margin: 0 1rem;
        position: absolute;
        top: 35rem;
        left: 50%;
        transform: translateX(-55%);
    }

    .mifoto {
        width: 180px;
        padding-left: 0rem;
        position: absolute;
        top: -20rem;
        left: 95%;
    }




     /* WORKS */
     
    .works {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
        padding: 2rem 0 4rem 0;
        position: static;
    }

  

  .works h2 {
        position: static;
        font-size: 60px;
        padding: 1rem 0 1rem 85px;
        left: auto;
        top: auto;
        text-align: left;
        width: calc(100% - 30px); 
        margin-left: 20px;         
        box-sizing: border-box;
        font-family: "code-saver", sans-serif;
        font-weight: 400;
        color: rgba(234, 63, 63, 1);
        font-style: normal;
    }

    .works > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 2.5rem;
        position: static;
        width: 100%;
    }

    .works img[class^="work"] {
        position: static !important;
        width: 90vw;
        max-width: 350px;
        height: auto;
        margin: 0 auto 0.5rem auto;
        display: block;
    }

    [class^="description"] {
        position: static !important;
        width: 90vw;
        max-width: 350px;
        margin: 0 0 1.5rem 0;
        text-align: left;
        color: rgba(234, 63, 63, 1);
        font-size: 1.1rem;
        font-family: "code-saver", sans-serif;
        padding-left: 1rem;
    }

    [class^="description"] h3 {
        margin: 0.2rem 0 0.2rem 0;
        font-size: 1.4rem;
        color: rgba(234, 63, 63, 1);
        font-family: "code-saver", sans-serif;
        font-weight: 400;
    }

    [class^="description"] p {
        margin: 0.2rem 0;
        font-size: 1.4rem;
        color: rgba(56, 55, 55, 1);
        font-family: "abhaya-libre", sans-serif;
        font-weight: 400;
    }





    .fade-in {
        opacity: 0;
        transform: translateY(20px); 
        transition: opacity 0.6s ease, transform 0.8s ease;
    }

    .fade-in.active {
        opacity: 1;
        transform: translateY(0);
    }




    
    /* CONTACT */

    .contact {
        background-color: rgba(234, 63, 63, 1);
        height: 55rem;
        padding-top: 2rem;
        margin-top: 1rem;
        position: relative;
        z-index: 2;
        width: 100%;
        color: rgba(216, 204, 254, 1);
        font-family: "droid-sans-mono", monospace;
    }

    .contact-title-group {
        width: 100%;
        margin-top: 39rem; 
        text-align: right; 
        position: absolute;
        right: 6rem; 
        bottom: 4rem; 
    }

    .contact-title-group .contact-line {
        width: 40%;
        height: 1px;
        background-color: rgba(216, 204, 254, 1);
        margin: 0 0 0 auto; 
        position: static; 
    }

    .contact-title-group h2 {
        font-size: 15px;
        font-weight: 400;
        font-style: normal;
        margin: 0.5rem 0 0 0; 
        color: rgba(216, 204, 254, 1);
        padding-right: 4rem; 
        position: static; 
        transition: font-style 0.1s ease;
    }

    
    .contact-info {
        position: absolute;
        top: 15rem;
        right: 5rem;
        text-align: right;
        font-size: 15px;
        line-height: 1.4;
    }


    .contact h2 .arrow {
        margin-left: 10px;
    }

    .contact h2:hover {
        font-style: italic;
    }

    
    .social-links {
        position: absolute;
        bottom: 10rem;
        left: 20%;
        font-size: 12px;
        letter-spacing: 1px;
        text-align: center;
    }

    .social-links a {
        color: rgba(216, 204, 254, 1);
        text-decoration: none;
        transition: color 0.3s ease;
    }




    
    .corner-arrow {
        position: fixed;
        right: 4rem;
        bottom: 3.5rem;
        z-index: 1000; 
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
        transition: transform 0.3s cubic-bezier(.4,2,.6,1);
    }

}