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

 body {
     font-family: 'Inter', sans-serif;
     background-color: #fff;
     color: #111;
 }

 /* ---------------------------------------------------------------------------------- FUENTES GOOGLE FONTS ------------------------------------------------------------- */

 .lilita-one-regular {
     font-family: "Lilita One", sans-serif;
     font-weight: 400;
     font-style: normal;
 }

 .caprasimo-regular {
     font-family: "Caprasimo", serif;
     font-weight: 400;
     font-style: normal;
     font-size: 1rem;
 }

 /* ---------------------------------------------------------------------------------- SHAPES TOP------------------------------------------------------------------------ */

 .corner {
     position: absolute;
     z-index: 50;
     pointer-events: none;
 }

 .top-left-1 {
     z-index: 52;
     top: 0;
     left: 0;
     opacity: 0.9;
 }

 .top-left-2 {
     top: 0px;
     left: 0px;
     opacity: 0.7;
 }

 .top-left-3 {
     top: 0px;
     left: 0px;
     opacity: 0.5;
 }

 .top-right-4 {
     top: 0;
     right: 0;
 }

 .top-right-5 {
     top: 0px;
     right: 0px;
     z-index: 52;
     opacity: 0.5;
 }

 .shape-ball-1 {
     position: absolute;
     animation: floaty 3s infinite ease-in-out;
     width: 10%;
     height: 10%;
     z-index: 51;
     left: 50px;
     top: 70px;
 }

 .shape-ball-2 {
     position: absolute;
     animation: floaty 3s infinite ease-in-out;
     width: 5%;
     height: 5%;
     z-index: 51;
     right: 10vw;
     top: 70px;
     opacity: 0.9;
 }

 /* ---------------------------------------------------------------------------------- HEADER & NAV --------------------------------------------------------------------- */

 header {
     position: fixed;
     top: 0;
     right: 0;
     height: 100vh;
     width: 200px;
     background: #00000000;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     z-index: 180;
 }

 header nav {
     display: flex;
     flex-direction: column;
     gap: 2rem;
 }

 header nav a {
     position: relative;
     color: #6017ce8a;
     text-decoration: none;
     font-weight: 600;
     font-size: 1.2rem;
     padding-left: 20px;
     transition: color 0.3s;
 }

 header nav a::before {
     content: '';
     position: absolute;
     right: -30px;
     top: 50%;
     transform: translateY(-50%);
     width: 10px;
     height: 2px;
     background-color: #5d14c9;
     transition: width 0.3s ease;
 }

 header nav a:hover::before {
     width: 20px;
 }

 header nav a:hover {
     color: #5b17c2;
 }


 header nav a.active::before {
     width: 20px;
 }

 header nav a.active {
     color: #5d14c9;
 }

 /* ---------------------------------------------------------------------------------- HAMBURGUESA ---------------------------------------------------------------------- */
 .hamburger {
     display: none;
     flex-direction: column;
     justify-content: space-between;
     width: 25px;
     height: 20px;
     cursor: pointer;
 }

 .hamburger span {
     display: block;
     height: 3px;
     background: #5F17CE;
     border-radius: 2px;
 }

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

 main {
     margin-right: 200px;
 }

 /* ---------------------------------------------------------------------------------- WELCOME SECTION ------------------------------------------------------------------ */

 .welcome-text {
     font-family: 'Montserrat', 'Syncopate', sans-serif;
     font-size: 10rem;
     font-weight: 900;
     text-transform: uppercase;
     color: #fff;
     text-align: center;
     position: absolute;
     top: 15%;
     justify-self: anchor-center;
     z-index: -1;
     text-shadow: 8px 7px 0px rgb(0 0 0 / 6%), -1px -1px 5px rgb(195 195 195);
     background-color: white;
     padding: 20px 0;
 }

 /* ---------------------------------------------------------------------------------- HERO SECTION --------------------------------------------------------------------- */

 .hero,
 #inicio {
     display: flex;
     flex-direction: column;
     justify-content: center;
     text-align: center;
 }

 .hero {
     padding: 50px 10px;
     z-index: 81;
     display: flex;
     align-items: center;
     color: #111111a1;
 }

 .hero h2 {
     font-size: 2.5rem;
     margin-top: 13%;
     color: #111;
     display: flex;
     flex-direction: row;
     align-items: flex-start;
     flex-wrap: wrap;
 }

 .hero p {
     font-size: 1.2rem;
     max-width: 600px;
     margin-top: 1rem;
     font-family: revert;
 }

 .resaltador {
     color: #5F17CE;
 }

 .resaltador-2 {
     color: #5F17CE;
     font-size: 9rem;
 }

 /* ---------------------------------------------------------------------------------- HERO TEXT SECTION ---------------------------------------------------------------- */

 .hero-text {
     font-size: 1.2rem;
     font-family: revert;
     color: #111111a1;
     display: flex;
     opacity: 1;
     z-index: 101;
     position: absolute;
     padding: 50px 288px 53px 336px;
     flex-direction: column;
 }

 .me-info {
     z-index: 101;
 }

 p {
     z-index: 101;
 }

 .redes-container {
     margin-top: 1rem;
     display: flex;
     gap: 1rem;
     font-family: revert;
 }

 .redes-container a {
     text-decoration: none;
     font-size: 1.3rem;
     color: #111111a1;
 }

 /* ---------------------------------------------------------------------------------- SECTION SOBRE MI ----------------------------------------------------------------- */

 .sobre-mi-section {
     margin-top: 10rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 80px 10%;
     background-color: #ffffff00;
     gap: 40px;
     border-color: #111;
     padding-top: 10rem;
     padding-bottom: 10rem;
     min-height: 100vh;
     padding-left: 20%;
 }

 #typing {
     border-right: 2px solid #007bff;
     padding-right: 5px;
     animation: blink 0.7s infinite;
 }

 .sobre-mi-text h4 {
     color: #5b17c2;
     font-weight: 600;
     margin-bottom: 10px;
     letter-spacing: 2px;
     font-size: 0.9rem;
 }

 .sobre-mi-text h2 {
     font-size: 2.5rem;
     margin-bottom: 20px;
 }

 .sobre-mi-text p {
     font-size: 1.1rem;
     line-height: 1.6;
     margin-bottom: 25px;
     color: #111111a1;
 }

 .sobre-mi-text .btn {
     background-color: #a23b29;
     color: #fff;
     padding: 12px 25px;
     border-radius: 8px;
     text-decoration: none;
     font-weight: 600;
     transition: all 0.3s ease;
 }

 .sobre-mi-text .btn:hover {
     background-color: #d62828;
     transform: scale(1.05);

 }

 .shake-top {
     display: inline-block;
     cursor: pointer;
 }

 .shake-top:hover {
     animation: shake-top .8s cubic-bezier(.455, .03, .515, .955) both;
 }


 .sobre-mi-img img {
     width: 135%;
     max-width: 150%;
     border-radius: 100%;
     object-fit: cover;
 }

 /* ---------------------------------------------------------------------------------- SECTION HABILIDADES O SKILLS ----------------------------------------------------- */

 #skills {
     padding: 100px 20% !important;
 }

 .skills-text {
     font-family: 'Montserrat', 'Syncopate', sans-serif;
     font-size: 10rem;
     font-weight: 900;
     text-transform: uppercase;
     color: #fff;
     text-align: center;
     position: absolute;
     justify-self: anchor-center;
     z-index: -1;
     text-shadow: 8px 7px 0px rgb(0 0 0 / 6%), -1px -1px 5px rgb(195 195 195);
     background-color: white;
     padding: 20px 0;
 }

 .frontend {
     color: #560ac7;
     font-size: 1.8rem;
     margin-top: 6rem;
 }

 .frontend-skills {
     display: flex;
     flex-wrap: wrap;
     gap: 18px;
     margin-top: 40px;
     width: 85rem;
 }

 .skill-el {
     background: #fff;
     border-radius: 10px;
     box-shadow: 0 2px 8px rgb(0 0 0 / 24%);
     padding: 27px;
     width: 10%;
     height: auto;
     display: flex;
     align-items: center;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     justify-content: center;
 }

 .skill-el:hover {
     transform: translateY(-4px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
 }

 .skill-el img {
     width: 100%;
     height: auto;
     object-fit: contain;
 }

 /*  --------------------------------------------------------------------------------- SHAPES MID ----------------------------------------------------------------------- */

 .total-shapes-bottom {
     margin-bottom: 24rem;
 }

 .borders {
     position: absolute;
     z-index: 50;
     pointer-events: none;
 }

 .left-8 {
     margin-top: 10%;
     left: 0;
 }

 .left-9 {
     margin-top: 15%;
     left: 0px;
     opacity: 0.7;
 }

 .left-10 {
     margin-top: 27%;
     right: 0;
     opacity: 1;
     width: 15%;
 }

 .left-11 {
     margin-top: 15%;
     right: 0;
     opacity: 0.5;
     width: 25%;
 }

 .shape-ball-3 {
     position: absolute;
     animation: floaty 3s infinite ease-in-out;
     width: 10%;
     height: 10%;
     z-index: 51;
     left: 40px;
     margin-top: 35rem;
 }

 .shape-ball-4 {
     position: absolute;
     animation: floaty 3s infinite ease-in-out;
     height: 10%;
     z-index: 51;
     right: 0;
     margin-top: 45rem;
 }

 img.img-ball-3 {
     animation: floaty 3s infinite ease-in-out;
     left: 0;
 }

 img.img-ball-4 {
     animation: floaty 3s infinite ease-in-out;
     z-index: 51;
     right: 60px;
     width: 70%;
     position: relative;
 }

 .shape8 {
     animation: floaty 3s infinite ease-in-out;
     width: 80%;
     height: 80%;
 }

 .shape9 {
     animation: floaty 3s infinite ease-in-out;
     width: 70%;
     height: 70%;
 }

 .shape10 {
     animation: floaty 3s infinite ease-in-out;
     width: 100%;
     height: 100%;
     object-fit: contain;
 }

 .shape11 {
     animation: floaty 3s infinite ease-in-out;
     width: 100%;
     height: 100%;
     object-fit: contain;
 }

 /* ---------------------------------------------------------------------------------- SECTION CERTIFICADOS ------------------------------------------------------------- */
 .cursos-text {
     font-family: 'Montserrat', 'Syncopate', sans-serif;
     font-size: 10rem;
     font-weight: 900;
     text-transform: uppercase;
     color: #fff;
     text-align: center;
     position: absolute;
     top: -18rem;
     text-shadow: 8px 7px 0px rgb(0 0 0 / 6%), -1px -1px 5px rgb(195 195 195);
     background-color: white;
     padding: 20px 0;
     margin-top: 10rem;
     margin-left: 13%;
 }

 .cursos-text-2 {
     font-family: 'Montserrat', 'Syncopate', sans-serif;
     font-size: 10rem;
     font-weight: 900;
     text-transform: uppercase;
     color: #fff;
     text-align: center;
     position: absolute;
     top: -18rem;
     text-shadow: 8px 7px 0px rgb(0 0 0 / 6%), -1px -1px 5px rgb(195 195 195);
     background-color: white;
     padding: 20px 0;
     margin-top: 10rem;
     margin-left: 13%;
     display: none;
 }

 #certificados {
     scroll-margin-top: 180px;
     display: grid;
     grid-template-columns: auto auto auto;
     gap: 6px;
     justify-items: center;
     align-items: center;
     padding: 40px;
     width: 42%;
     position: relative;
     left: 30%;
     margin-top: -4rem;
 }



 .card {
     perspective: 1000px;
     cursor: pointer;
     width: 100%;
     height: 100%;
 }

 .inner-card {
     position: relative;
     transition: transform 0.8s;
     transform-style: preserve-3d;
 }

 .inner-card-1 {
     width: 19rem;
     height: 25rem;
     grid-row: 1 / span 2;
     grid-column: 1;
 }

 .inner-card-2 {
     width: 13rem;
     height: 25rem;
     grid-row: 1;
     grid-column: 2;
 }

 .inner-card-5 {
     width: 201.5%;
     height: 10rem;
     grid-row: 2;
     grid-column: 2 / span 2;
 }

 .inner-card-3 {
     width: 13rem;
     height: 25rem;
     grid-row: 1 / span 2;
     grid-column: 3;
 }

 .inner-card-4 {
     width: 100%;
     height: 10rem;
     grid-row: 3;
     grid-column: 1 / span 3;
 }

 .card.flipped .inner-card {
     transform: rotateY(180deg);
 }

 .front,
 .back {
     position: absolute;
     width: 100%;
     height: 100%;
     border-radius: 12px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
     backface-visibility: hidden;
     background: white;
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
     align-items: center;
     padding: 15px;
     align-content: center;
 }

 .front img {
     max-width: 100%;
     max-height: 60px;
     object-fit: contain;
 }

 .back {
     transform: rotateY(180deg);
     text-align: center;
 }

 .back h3 {
     margin-bottom: 8px;
     font-size: 18px;
     color: #333;
 }

 .back p {
     font-size: 14px;
     color: #666;
 }

 .back small {
     color: #999;
     margin-top: 10px;
     display: block;
 }

 /* ---------------------------------------------------------------------------------- SECTION PROJECTS ----------------------------------------------------------------- */

 .proyecto-text {
     font-family: 'Montserrat', 'Syncopate', sans-serif;
     font-size: 6vw;
     font-weight: 900;
     text-transform: uppercase;
     color: #fff;
     text-align: center;
     position: relative;
     text-shadow: 8px 7px 0px rgb(0 0 0 / 6%), -1px -1px 5px rgb(195 195 195);
     background-color: white;
 }

 #proyectos {
     padding: 4rem 2rem;
     background: #ffffff;
     text-align: center;
     margin-top: 20rem;
     margin-bottom: 10rem;
 }

 .proyectos-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
     gap: 2rem;
     padding: 0vw 8vw;
 }

 .proyecto-card {
     background: #fff;
     padding: 1.5rem;
     border-radius: 12px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     text-align: left;
     transition: transform 0.3s ease;
 }

 .proyecto-card:hover {
     transform: translateY(-5px);
 }

 .logo {
     width: 40px;
     height: 40px;
     object-fit: contain;
     margin-bottom: 1rem;
 }

 .proyecto-card h3 {
     margin-bottom: 0.5rem;
     color: #333;
 }

 .proyecto-card p {
     margin-bottom: 1rem;
     font-size: 0.95rem;
     color: #555;
 }

 .proyecto-card .tecnologias {
     font-style: italic;
     font-size: 0.85rem;
     color: #777;
 }

 .proyecto-card a {
     display: inline-block;
     padding: 0.5rem 1rem;
     background: #4f17a3;
     color: #fff;
     border-radius: 8px;
     text-decoration: none;
     font-size: 0.9rem;
     transition: background 0.3s ease;
 }

 .proyecto-card a:hover {
     background: #2b0b66;
 }


 /* ---------------------------------------------------------------------------------- SECTION CONTACTO ----------------------------------------------------------------- */

 section#contacto {
     margin-top: 5rem;
     margin-bottom: 20rem;
     padding-top: 20rem;
     padding-bottom: 3rem;
 }

 .container {
     display: flex;
     background: #fff;
     border-radius: 10px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     width: 800px;
     max-width: 95%;
     font-family: revert;
     justify-self: center;
 }

 .form-section {
     flex: 1;
     padding: 40px;
 }

 .form-section h2 {
     margin-bottom: 20px;
 }

 .form-contacto {
     display: flex;
     flex-direction: column;
     gap: 15px;
     font-family: revert;
     color: #11111169;
 }

 .form-contacto input,
 .form-contacto textarea {
     width: 100%;
     padding: 12px;
     border: 1px solid #ddd;
     border-radius: 5px;
     outline: none;
 }

 .form-contacto input:focus,
 .form-contacto textarea:focus {
     border-color: #007bff;
     box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
 }

 .form-contacto button {
     padding: 12px;
     border: none;
     border-radius: 5px;
     background: #007bff;
     color: #fff;
     font-size: 16px;
     cursor: pointer;
 }

 .form-contacto button:hover {
     background: #0056b3;
 }

 .image-section {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     background: #ffffff00;
 }

 .image-section img {
     max-width: 100%;
     height: auto;
     border-left: 1px solid rgba(138, 122, 122, 0.226);
     padding-left: 3rem;
     padding-right: 3rem;
 }

 /* ---------------------------------------------------------------------------------- FOOTER --------------------------------------------------------------------------- */

 .footer-carousel {
     background: #ffffff00;
     color: #000000;
     padding: 25px 20px;
     text-align: center;
 }

 .carousel-container {
     overflow: hidden;
     width: 100%;
     margin: 0 0 35px 0;
     max-width: 100%;
     position: relative;
 }

 .carousel-track {
     display: flex;
     gap: 20px;
     animation: scroll 20s linear infinite;
 }

 .carousel-track img {
     width: 100px;
     height: 70px;
     object-fit: contain;
     border-radius: 10px;
 }

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

 @keyframes shake-top {

     0%,
     100% {
         transform: rotate(0deg);
         transform-origin: 50% 0;
     }

     10% {
         transform: rotate(2deg);
     }

     20%,
     40%,
     60% {
         transform: rotate(-4deg);
     }

     30%,
     50%,
     70% {
         transform: rotate(4deg);
     }

     80% {
         transform: rotate(-2deg);
     }

     90% {
         transform: rotate(2deg);
     }
 }

 @keyframes floaty {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-15px);
     }
 }

 @keyframes blink {
     50% {
         border-color: transparent;
     }
 }

 @keyframes scroll {
     0% {
         transform: translateX();
     }

     100% {
         transform: translateX(-50%);
     }
 }

 /* ---------------------------------------------------------------------------------- MEDIA QUERIES RESPONSIVE DESIGN -------------------------------------------------- */

 /* ----------------------------------------------------------------------------------- MOBILE -------------------------------------------------------------------------- */

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

     /* Ajustes generales para móviles */
     html,
     body {
         width: 100%;
         overflow-x: hidden;
         -webkit-text-size-adjust: 100%;
         -ms-text-size-adjust: 100%;
         text-size-adjust: 100%;
     }

     /* ------------------------------------------------------------------------------ HAMBURGUESA, HEADER & NAV -------------------------------------------------------- */
     .hamburger {
         display: flex;
         z-index: 1010;
     }

     header {
         position: fixed;
         top: 0;
         right: 0px;
         height: 25vh;
         width: 40px;
         background: #00000000;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         z-index: 180;
     }

     #nav-menu {
         position: fixed;
         inset: 0;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         background: rgba(255, 255, 255, 0.22);
         backdrop-filter: blur(10px);
         -webkit-backdrop-filter: blur(10px);
         opacity: 0;
         transform: translateY(-3%);
         pointer-events: none;
         transition: opacity .22s ease, transform .22s ease;
         z-index: 1000;
         width: 130vw;
     }

     #nav-menu.show {
         opacity: 1;
         transform: translateY(0);
         pointer-events: auto;
         width: 130vw;
     }

     #nav-menu a {
         font-size: clamp(1.6rem, 5vw, 2.2rem);
         color: #8263ced1;
         text-decoration: none;
         transition: color .15s;
     }

     #nav-menu a:hover {
         color: #4f17a3;
     }

     header nav {
         gap: 1rem;
         padding-right: 6rem;
     }

     header nav a {
         font-size: 0.8rem;
         padding-left: 0;
         padding: 0 !important;
     }

     header nav a::before {
         display: none;
     }

     /* ------------------------------------------------------------------------------ SHAPES TOP------------------------------------------------------------------------ */
     .top-left-1,
     .top-left-2,
     .top-left-3 {
         display: block;
         width: 30%;
         opacity: 0.3;
     }

     img.shapes-img1.totalimgshapes {
         width: 15vw;
     }

     img.shapes-img2.totalimgshapes {
         width: 20vw;
     }

     img.shapes-img3.totalimgshapes {
         width: 35vw;
     }

     img.shapes-img4.totalimgshapes {
         width: 25vw;
     }

     img.shapes-img5.totalimgshapes {
         width: 20vw;
     }

     img.shapes-img6 {
         width: 10vw;
     }

     img.shapes-img7 {
         width: 10vw;
     }

     .top-right-4 {
         top: 0;
         right: 0;
         opacity: 0.6;
     }

     .shape-ball-1 {
         position: absolute;
         animation: floaty 3s infinite ease-in-out;
         width: 10%;
         height: 10%;
         z-index: 51;
         left: 10px;
         top: 30px;
     }

     .shape-ball-2 {
         position: absolute;
         animation: floaty 3s infinite ease-in-out;
         width: 5%;
         height: 5%;
         z-index: 51;
         right: 10vw;
         top: 40px;
         opacity: 0.9;
     }

     /* ------------------------------------------------------------------------------ MAIN CONTENT---------------------------------------------------------------------- */
     main {
         margin-right: 0;
     }

     .welcome-text {
         font-size: 6rem;
         top: 5%;
         padding: 5px 0;
         justify-self: center;
         left: auto;
         font-size: 12vw;
         top: 10px;
     }

     [data-aos^=fade][data-aos^=fade].aos-animate {
         opacity: 1;
         transform: translateZ(0);
     }

     /* ------------------------------------------------------------------------------ HERO SECTION --------------------------------------------------------------------- */

     .hero,
     #inicio {
         display: flex;
         flex-direction: column;
         justify-content: center;
         text-align: center;
     }

     .hero {
         padding: 8px 10px;
         z-index: 81;
         display: flex;
         align-items: center;
         color: #111111a1;
     }

     .hero h2 {
         font-size: 3.8vw;
         margin-top: 10%;
         display: flex;
         flex-wrap: wrap;
         align-items: flex-start;
     }

     .resaltador-2 {
         font-size: 9vw;
     }

     .hero p {
         font-size: 3vw;
         max-width: 600px;
         margin-top: 1rem;
         font-family: revert;
         display: flex;
         flex-direction: column;
     }

     .hero-text {
         position: static;
         padding: 10vw;
         font-size: 13px;
         text-align: justify;
         word-spacing: 2px;
     }

     .redes-container {
         display: flex;
         gap: 11px;
     }

     .redes-container a {
         text-decoration: none;
         font-size: 13px;
         color: #111111a1;
     }

     .redes-container a img {
         width: 10px;
     }

     /* ------------------------------------------------------------------------------ SECTION SOBRE MI ----------------------------------------------------------------- */
     .sobre-mi-section {
         flex-direction: column-reverse;
         padding: 80px 10vw;
         margin-top: 0rem;
         text-align: center;
     }

     .sobre-mi-text h4 {
         color: #5b17c2;
         font-weight: 600;
         margin-bottom: 10px;
         letter-spacing: 2px;
         font-size: 3vw;
     }

     .sobre-mi-text h2 {
         font-size: 5vw;
         margin-bottom: 20px;
     }

     .sobre-mi-text p {
         font-size: 4.4vw;
         line-height: 1.5;
         margin-bottom: 25px;
         color: #111111a1;
     }

     p.sobre-mi-parrafo {
         text-align: justify;
         font-size: 15px;
         line-height: 1.6;
     }

     .sobre-mi-text .btn {
         background-color: #a23b29;
         color: #fff;
         padding: 12px 25px;
         border-radius: 8px;
         text-decoration: none;
         font-weight: 600;
         width: -webkit-fill-available;
         transition: all 0.3s ease;
     }

     .sobre-mi-img img {
         width: 35vw;
     }

     /* ------------------------------------------------------------------------------ SECTION HABILIDADES O SKILLS ----------------------------------------------------- */
     #skills {
         padding: 30px 35px;
     }

     .skills-text {
         font-size: 17vw;
         justify-content: center;
         left: auto;
     }

     .frontend-skills {
         width: 100%;
         justify-content: left;
     }

     .frontend {
         color: #560ac7;
         font-size: 5vw;
         margin-top: 17vw;
     }

     .skill-el {
         width: 26%;
         padding: 3vw;
     }

     /* ------------------------------------------------------------------------------ SHAPES MID ----------------------------------------------------------------------- */

     .left-8 {
         margin-top: 14vh;
         left: 0;
     }

     .left-9 {
         margin-top: 16vh;
         left: 0px;
         opacity: 0.7;
     }

     .left-10 {
         margin-top: 15%;
         right: 0;
         opacity: 1;
         width: 20%;
     }

     .left-11 {
         margin-top: 0%;
         right: 0;
         opacity: 0.5;
         width: 32%;
     }

     .shape8 {
         animation: floaty 3s infinite ease-in-out;
         width: 25vw;
         height: auto;
     }

     .shape9 {
         animation: floaty 3s infinite ease-in-out;
         width: 18vw;
         height: auto;
     }

     .shape-ball-3 {
         position: absolute;
         animation: floaty 3s infinite ease-in-out;
         width: auto;
         height: auto;
         z-index: 51;
         left: 5px;
         margin-top: 25vh;
     }

     .shape-ball-4 {
         position: absolute;
         animation: floaty 3s infinite ease-in-out;
         height: 10%;
         z-index: 51;
         right: 0;
         margin-top: 30vw;
     }

     img.img-ball-3 {
         animation: floaty 3s infinite ease-in-out;
         width: 9vw;
     }

     img.img-ball-4 {
         animation: floaty 3s infinite ease-in-out;
         z-index: 51;
         right: 5vw;
         width: 9vw;
         position: relative;
     }

     /* ------------------------------------------------------------------------------ SHAPES MID ----------------------------------------------------------------------- */

     .total-shapes-bottom {
         margin-bottom: -3rem;
         margin-top: 12rem;
         z-index: 0;
     }

     /* ------------------------------------------------------------------------------ SECTION CERTIFICADOS ------------------------------------------------------------- */

     .cursos-text-2 {
         display: block;
         font-size: 12vw;
         position: static;
         margin: 0px 0;
     }

     #certificados {
         scroll-margin-top: 180px;
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         grid-auto-rows: auto;
         gap: 5px;
         padding: 88px;
         width: 100%;
         height: 100%;
         left: 0;
         margin-top: -6.5rem;
         z-index: 100;
         justify-content: center;
         margin-bottom: 15vh;
     }

     #certificados .card:nth-child(1),
     #certificados .card:nth-child(2),
     #certificados .card:nth-child(3) {
         grid-column: span 1;
         height: 15vh;
         width: 25vw;
     }

     #certificados .card:nth-child(4),
     #certificados .card:nth-child(5) {
         grid-column: span 2;
         height: 15vh;
     }

     .card {
         width: 100%;
         height: 100%;
         perspective: 1000px;
         z-index: 1;
     }

     .inner-card {
         width: 100%;
         height: 100%;
         position: relative;
         transition: transform 0.8s;
         transform-style: preserve-3d;
     }

     .card.active .inner-card {
         transform: rotateY(180deg);
     }

     .inner-card-5 {
         width: 25vw !important;
         height: 15vh;
         grid-row: 2;
         grid-column: 2 / span 2;
     }

     .front,
     .back {
         position: absolute;
         width: 100%;
         height: 100%;
         border-radius: 12px;
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
         backface-visibility: hidden;
         background: white;
         display: flex;
         flex-direction: column;
         justify-content: space-evenly;
         align-items: center;
         padding: 15px;
     }

     .front {
         z-index: 2;
     }

     .back {
         transform: rotateY(180deg);
         background: #fff;
         overflow-y: auto;
         padding: 10px;
         z-index: 3;
     }

     .back h3 {
         font-size: 10px;
         display: none;
     }

     .back p {
         font-size: 9px;
         margin-bottom: 10px;
     }

     .credential {
         display: none;
     }

     .back small {
         font-size: 10px;
     }

     /* AOS fix en mobile */
     [data-aos] {
         opacity: 1;
         transform: none;
         transition: none;
     }

     /* ------------------------------------------------------------------------------ SECTION PROJECTS ------------------------------------------------------------- */
     #proyectos {
         padding: 2rem 0.5rem;
         background: #fff;
         text-align: center;
         margin-top: 6rem;
         margin-bottom: 4rem;
     }

     #proyectos h2 {
         font-size: 2.5rem;
         margin-bottom: 1.5rem;
     }

     .proyectos-container {
         display: flex;
         flex-direction: column;
         gap: 1.5rem;
     }

     .proyecto-card {
         padding: 1rem;
         border-radius: 10px;
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
         font-size: 1rem;
     }

     .logo {
         width: 32px;
         height: 32px;
         margin-bottom: 0.5rem;
     }

     .proyecto-card h3 {
         font-size: 1.2rem;
     }

     .proyecto-card p {
         font-size: 0.95rem;
     }

     .proyecto-card .tecnologias {
         font-size: 0.85rem;
     }

     .proyecto-card a {
         font-size: 0.9rem;
         padding: 0.4rem 0.8rem;
     }

     /* ------------------------------------------------------------------------------ MEDIA QUERIES RESPONSIVE CONTACT ------------------------------------------------- */

     section#contacto {
         margin-top: 0rem;
         margin-bottom: 10rem;
         padding-bottom: 3rem;
         padding-top: 5rem;
     }

     .container {
         flex-direction: column;
         width: 90%;
     }

     .image-section img {
         border-left: none;
         border-top: 1px solid rgba(138, 122, 122, 0.226);
         padding: 20px;
         display: none;
     }

     .footer-carousel {
         background: #ffffff00;
         color: #000000;
         padding: 16px 0px;
         text-align: center;
         font-size: 1rem;
     }

     .carousel-track img {
         width: 70px;
         height: 50px;
     }

 }

 /* ---------------------------------------------------------------------------------- TABLETS & MEJORAS ---------------------------------------------------------------- */

 @media screen and (min-width: 769px) and (max-width: 1024px) {
     /* Ajustes generales para tablets */

     html,
     body {
         width: 100%;
         overflow-x: hidden;
         -webkit-text-size-adjust: 100%;
         -ms-text-size-adjust: 100%;
         text-size-adjust: 100%;
     }


     /* ---------------------------------------------------------------------------------- HEADER & NAV ------------------------------------------------------------------------------ */

     .hamburger {
         display: flex;
         z-index: 1010;
     }

     header {
         position: fixed;
         top: 0;
         right: 0px;
         height: 25vh;
         width: 40px;
         background: #00000000;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         z-index: 180;
     }

     #nav-menu {
         position: fixed;
         inset: 0;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         background: rgba(255, 255, 255, 0.22);
         backdrop-filter: blur(10px);
         -webkit-backdrop-filter: blur(10px);
         opacity: 0;
         transform: translateY(-3%);
         pointer-events: none;
         transition: opacity .22s ease, transform .22s ease;
         z-index: 1000;
         width: 112vw;
     }

     #nav-menu.show {
         opacity: 1;
         transform: translateY(0);
         pointer-events: auto;
         width: 112vw;
     }

     #nav-menu a {
         font-size: 3vw;
         color: #8263ced1;
         text-decoration: none;
         transition: color .15s;
     }

     #nav-menu a:hover {
         color: #4f17a3;
     }

     header nav {
         gap: 1rem;
         padding-right: 6rem;
     }

     header nav a {
         font-size: 0.8rem;
         padding-left: 0;
         padding: 0 !important;
     }

     header nav a::before {
         display: none;
     }


     /* ---------------------------------------------------------------------------------- SHAPES TOP--------------------------------------------------------------------------------- */

     .top-left-1,
     .top-left-2,
     .top-left-3 {
         display: block;
         width: 30%;
         opacity: 0.3;
     }

     img.shapes-img1.totalimgshapes {
         width: 15vw;
     }

     img.shapes-img2.totalimgshapes {
         width: 20vw;
     }

     img.shapes-img3.totalimgshapes {
         width: 35vw;
     }

     img.shapes-img4.totalimgshapes {
         width: 25vw;
     }

     img.shapes-img5.totalimgshapes {
         width: 20vw;
     }

     img.shapes-img6 {
         width: 10vw;
     }

     img.shapes-img7 {
         width: 10vw;
     }

     .top-right-4 {
         top: 0;
         right: 0;
         opacity: 0.6;
     }

     .shape-ball-1 {
         position: absolute;
         animation: floaty 3s infinite ease-in-out;
         width: 10%;
         height: 10%;
         z-index: 51;
         left: 10px;
         top: 30px;
     }

     .shape-ball-2 {
         position: absolute;
         animation: floaty 3s infinite ease-in-out;
         width: 5%;
         height: 5%;
         z-index: 51;
         right: 10vw;
         top: 40px;
         opacity: 0.9;
     }

     /* ---------------------------------------------------------------------------------- MAIN CONTENT------------------------------------------------------------------------------- */
     main {
         margin-right: 0;
     }

     .welcome-text {
         font-size: 6rem;
         top: 5%;
         padding: 5px 0;
         justify-self: center;
         left: auto;
         font-size: 12vw;
         top: 10px;
     }

     [data-aos^=fade][data-aos^=fade].aos-animate {
         opacity: 1;
         transform: translateZ(0);
     }


     /* ---------------------------------------------------------------------------------- HERO SECTION ------------------------------------------------------------------------------ */

     .hero-text {
         padding: 50px 10vw;
     }

     .hero h2 {
         font-size: 1.5rem;
         margin-top: 4%;
     }

     /* ---------------------------------------------------------------------------------- SECTION SOBRE MI -------------------------------------------------------------------------- */

     .sobre-mi-section {
         padding-left: 10%;
     }

     /* ---------------------------------------------------------------------------------- SECTION HABILIDADES O SKILLS -------------------------------------------------------------- */
     #skills {
         padding: 60px 10%;
     }

     .frontend-skills {
         width: 100%;
     }

     .skill-el {
         width: 13vw;
     }

     /* -------------------------------------------------------------------------------- SHAPES MID -------------------------------------------------------------------------------- */
     .total-shapes-bottom {
         margin-bottom: 0rem;
         margin-top: 6rem;
         z-index: 0 !important;
     }

     .left-8 {
         margin-top: 20vh;
         left: 0;
     }

     .left-9 {
         margin-top: 28vh;
         left: 0px;
         opacity: 0.7;
     }

     .left-10 {
         margin-top: 24vh;
         right: 0;
         opacity: 1;
         width: 15%;
     }

     .left-11 {
         margin-top: 15vh;
         right: 0;
         opacity: 0.5;
         width: 25%;
     }

     .shape8 {
         animation: floaty 3s infinite ease-in-out;
         width: 25vw;
         height: auto;
     }

     .shape9 {
         animation: floaty 3s infinite ease-in-out;
         width: 15vw;
         height: auto;
     }

     .shape-ball-3 {
         position: absolute;
         animation: floaty 3s infinite ease-in-out;
         width: auto;
         height: auto;
         z-index: 51;
         left: 5px;
         margin-top: 29rem;
     }

     .shape-ball-4 {
         position: absolute;
         animation: floaty 3s infinite ease-in-out;
         height: 10%;
         z-index: 51;
         right: 0;
         margin-top: 35vh;
     }

     img.img-ball-3 {
         animation: floaty 3s infinite ease-in-out;
         width: 9vw;
     }

     img.img-ball-4 {
         animation: floaty 3s infinite ease-in-out;
         z-index: 51;
         right: 5vw;
         width: 9vw;
         position: relative;
     }

     /* -------------------------------------------------------------------------------- SECTION CERTIFICADOS ----------------------------------------------------------- */

     .cursos-text-2 {
         display: block;
         font-size: 10vw;
         position: static;
         margin: 10rem 0px 0px 0px;
     }

     #certificados {
         width: 100%;
         left: 0;
         z-index: 100;
         padding: 0 20vw;
     }

     .inner-card-1 {
         width: 100%;
         height: 25rem;
         grid-row: 1 / span 2;
         grid-column: 1;
     }

     .inner-card-2 {
         width: 100%;
         height: 25rem;
         grid-row: 1;
         grid-column: 2;
     }

     .inner-card-3 {
         width: 100%;
         height: 25rem;
         grid-row: 1 / span 2;
         grid-column: 3;
     }

     .inner-card-5 {
         width: 201.5%;
         height: 10rem;
         grid-row: 2;
         grid-column: 2 / span 2;
     }

     .front,
     .back {
         padding: 0px;
         font-size: smaller;
         overflow: overlay;
     }

     /*--------------------------------------------------------------------------------- SECTION PROJECTS --------------------------------------------------------------- */
     #proyectos {
         padding: 3rem 2vw;
         margin-top: 10rem;
         margin-bottom: 6rem;
     }

     #proyectos h2 {
         font-size: 4rem;
         margin-bottom: 1.5rem;
     }

     .proyectos-container {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
         gap: 1.5rem;
     }

     .proyecto-card {
         padding: 1.2rem;
         border-radius: 12px;
         box-shadow: 0 3px 8px rgba(0, 0, 0, 0.09);
         font-size: 1.05rem;
     }

     .logo {
         width: 36px;
         height: 36px;
         margin-bottom: 0.7rem;
     }

     .proyecto-card h3 {
         font-size: 1.3rem;
     }

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

     .proyecto-card .tecnologias {
         font-size: 0.9rem;
     }

     .proyecto-card a {
         font-size: 1rem;
         padding: 0.5rem 1rem;
     }
 }

 /* ---------------------------------------------------------------------------------- DESKTOP LARGE & XL --------------------------------------------------------------- */

 @media screen and (min-width: 1025px) and (max-width: 1799px) {

     html,
     body {
         width: 100%;
         overflow-x: hidden;
         -webkit-text-size-adjust: 100%;
         -ms-text-size-adjust: 100%;
         text-size-adjust: 100%;
     }


     /* ---------------------------------------------------------------------------------- HEADER & NAV ------------------------------------------------------------------------------ */
     header {
         position: fixed;
         top: 0;
         right: 0;
         height: 100vh;
         width: 200px;
         background: #00000000;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         z-index: 180;
     }

     header nav {
         display: flex;
         flex-direction: column;
         gap: 2rem;
     }

     header nav a {
         position: relative;
         color: #6017ce8a;
         text-decoration: none;
         font-weight: 600;
         font-size: 1.2rem;
         padding-left: 20px;
         transition: color 0.3s;
     }

     header nav a::before {
         content: '';
         position: absolute;
         right: -30px;
         top: 50%;
         transform: translateY(-50%);
         width: 10px;
         height: 2px;
         background-color: #5d14c9;
         transition: width 0.3s ease;
     }

     header nav a:hover::before {
         width: 20px;
     }

     header nav a:hover {
         color: #5b17c2;
     }


     header nav a.active::before {
         width: 20px;
     }

     header nav a.active {
         color: #5d14c9;
     }


     /* ---------------------------------------------------------------------------------- SHAPES TOP--------------------------------------------------------------------------------- */

     .top-left-1,
     .top-left-2,
     .top-left-3 {
         display: block;
         width: 30%;
         opacity: 0.3;
     }

     img.shapes-img1.totalimgshapes {
         width: 15vw;
     }

     img.shapes-img2.totalimgshapes {
         width: 20vw;
     }

     img.shapes-img3.totalimgshapes {
         width: 35vw;
     }

     img.shapes-img4.totalimgshapes {
         width: 25vw;
     }

     img.shapes-img5.totalimgshapes {
         width: 20vw;
     }

     img.shapes-img6 {
         width: 10vw;
     }

     img.shapes-img7 {
         width: 10vw;
     }

     .top-right-4 {
         top: 0;
         right: 0;
         opacity: 0.6;
     }

     .shape-ball-1 {
         position: absolute;
         animation: floaty 3s infinite ease-in-out;
         width: 10%;
         height: 10%;
         z-index: 51;
         left: 10px;
         top: 30px;
     }

     .shape-ball-2 {
         position: absolute;
         animation: floaty 3s infinite ease-in-out;
         width: 5%;
         height: 5%;
         z-index: 51;
         right: 10vw;
         top: 40px;
         opacity: 0.9;
     }

     /* ---------------------------------------------------------------------------------- MAIN CONTENT------------------------------------------------------------------------------- */
     main {
         margin-right: 0;
     }

     .welcome-text {
         font-size: 6rem;
         top: 5%;
         padding: 5px 0;
         justify-self: center;
         left: auto;
         font-size: 12vw;
         top: 10px;
     }

     [data-aos^=fade][data-aos^=fade].aos-animate {
         opacity: 1;
         transform: translateZ(0);
     }


     /* ---------------------------------------------------------------------------------- HERO SECTION ------------------------------------------------------------------------------ */

     .hero-text {
         padding: 50px 10vw;
     }

     .hero h2 {
         font-size: 1.5rem;
         margin-top: 7vw;
     }

     /* ---------------------------------------------------------------------------------- SECTION SOBRE MI -------------------------------------------------------------------------- */

     .sobre-mi-section {
         padding: 10vw 17vw 1vw 10vw;
     }

     .sobre-mi-img img {
         width: 150%;
         max-width: 150%;
         border-radius: 100%;
         object-fit: cover;
     }

     /* ---------------------------------------------------------------------------------- SECTION HABILIDADES O SKILLS -------------------------------------------------------------- */
     #skills {
         padding: 60px 10%;
     }

     .frontend-skills {
         width: 100%;
     }

     .skill-el {
         width: 9vw;
     }

     /* -------------------------------------------------------------------------------- SHAPES MID -------------------------------------------------------------------------------- */
     .total-shapes-bottom {
         margin-bottom: 0rem;
         margin-top: 0rem;
         z-index: 0 !important;
     }

     .left-8 {
         margin-top: 25vh;
         left: 0;
     }

     .left-9 {
         margin-top: 36vh;
         left: 0px;
         opacity: 0.7;
     }

     .left-10 {
         margin-top: 30vh;
         right: 0;
         opacity: 1;
         width: 15%;
     }

     .left-11 {
         margin-top: 15vh;
         right: 0;
         opacity: 0.5;
         width: 25%;
     }

     .shape8 {
         animation: floaty 3s infinite ease-in-out;
         width: 25vw;
         height: auto;
     }

     .shape9 {
         animation: floaty 3s infinite ease-in-out;
         width: 16vw;
         height: auto;
     }

     .shape-ball-3 {
         position: absolute;
         animation: floaty 3s infinite ease-in-out;
         width: auto;
         height: auto;
         z-index: 51;
         left: 5px;
         margin-top: 49vw;
     }

     .shape-ball-4 {
         position: absolute;
         animation: floaty 3s infinite ease-in-out;
         height: 10%;
         z-index: 51;
         right: 0;
         margin-top: 44vh;
     }

     img.img-ball-3 {
         animation: floaty 3s infinite ease-in-out;
         width: 9vw;
     }

     img.img-ball-4 {
         animation: floaty 3s infinite ease-in-out;
         z-index: 51;
         right: 5vw;
         width: 9vw;
         position: relative;
     }

     /* -------------------------------------------------------------------------------- SECTION CERTIFICADOS ----------------------------------------------------------- */

     .cursos-text-2 {
         display: block;
         font-size: 10vw;
         position: static;
         margin: 10rem 0px 0px 0px;
     }

     #certificados {
         width: 100%;
         left: 0;
         z-index: 100;
         padding: 0 20vw;
     }

     .inner-card-1 {
         width: 100%;
         height: 25rem;
         grid-row: 1 / span 2;
         grid-column: 1;
     }

     .inner-card-2 {
         width: 100%;
         height: 25rem;
         grid-row: 1;
         grid-column: 2;
     }

     .inner-card-3 {
         width: 100%;
         height: 25rem;
         grid-row: 1 / span 2;
         grid-column: 3;
     }

     .inner-card-5 {
         width: 201.5%;
         height: 10rem;
         grid-row: 2;
         grid-column: 2 / span 2;
     }

     .front,
     .back {
         padding: 5px;
     }

     /*--------------------------------------------------------------------------------- SECTION PROJECTS --------------------------------------------------------------- */

     #proyectos {
         padding: 4rem 2rem;
         margin-top: 20rem;
         margin-bottom: 10rem;
     }

     #proyectos h2 {
         font-size: 6rem;
         margin-bottom: 0;
     }

     .proyectos-container {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
         gap: 2rem;
     }

     .proyecto-card {
         padding: 1.5rem;
         border-radius: 12px;
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
         font-size: 1.1rem;
     }

     .logo {
         width: 40px;
         height: 40px;
         margin-bottom: 1rem;
     }

     .proyecto-card h3 {
         font-size: 1.5rem;
     }

     .proyecto-card p {
         font-size: 1.05rem;
     }

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

     .proyecto-card a {
         font-size: 1rem;
         padding: 0.5rem 1rem;
     }
 }

 /* ---------------------------------------------------------------------------------- DESKTOP XL & 2K ------------------------------------------------------------------ */

 @media screen and (min-width: 1900px) {
     /* Ajustes generales para pantallas muy grandes */


     .hero h2 {
         margin-top: 22vh;
     }

     .hero-text {
         padding: 4vw 20vw 7vw 18vw;
     }

     #skills {
         padding: 100px 26%;
     }

     .left-10 {
         margin-top: 11%;
     }

     .left-11 {
         margin-top: 0%;
     }

     .shape-ball-4 {
         margin-top: 37rem;
     }

     .cursos-text-2 {
         font-family: 'Montserrat', 'Syncopate', sans-serif;
         font-size: 7vw;
         font-weight: 900;
         text-transform: uppercase;
         color: #fff;
         text-align: center;
         position: relative;
         text-shadow: 8px 7px 0px rgb(0 0 0 / 6%), -1px -1px 5px rgb(195 195 195);
         background-color: white;
         padding: 20px 0;
         top: -10rem;
         margin-top: 0;
         margin-left: 5%;
         display: block;
     }

     #certificados {
         scroll-margin-top: 180px;
         display: grid;
         grid-template-columns: auto auto auto;
         gap: 6px;
         justify-items: center;
         align-items: center;
         padding: 40px;
         width: 50%;
         position: relative;
         margin-top: -17rem;
         justify-self: anchor-center;
         left: 3vw;
     }

     .inner-card-1 {
         width: 100%;
     }

     .inner-card-2 {
         width: 100%;
     }

     .inner-card-3 {
         width: 100%;
     }

     .container {
         width: 60rem;
         max-width: 100%;
         font-size: 0.9rem;
     }

     .form-contacto input,
     .form-contacto textarea {
         font-size: 0.7vw;
     }

     .image-section img {
         max-width: 100%;
         width: 25rem;
         border-left: 1px solid rgba(138, 122, 122, 0.226);
         padding-left: 3rem;
         padding-right: 3rem;
     }

 }