* {
     padding: 0;
     margin: 0;
     list-style: none;
     text-decoration: none;
 }

 :root {
     --primary-color-text-primary: #ffffff;
     --primary-color-text-secondary: #d6d6d6;
     --primary-color-active: #e1bc4b;
     --background-color: #131215;
     --background-color-secondary: #1e1e1f;
     --background-color-tertiary: #373738;
     --background-color-span: #45413a;
     --background-color-span-rgb: 69, 65, 58;
     --background-color-nav: #282829;
     --primary-color-icon: #ccc;
     --primary-color-icon-active: #e1bc4b;
 }

 body {
     background-color: var(--background-color);
     width: 100%;
     height: auto;
     min-height: 100vh;
     font-family: monospace;
 }

 main {
     padding: 100px 20px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 25% 75%;
     gap: 20px;
     width: calc(80% - 40px);
     max-width: 1920px;
 }

 body::-webkit-scrollbar {
     height: 7px;
     width: 8px;
 }

 body::-webkit-scrollbar-track {
     background: var(--background-color-span);
 }

 body::-webkit-scrollbar-thumb {
     background: var(--primary-color-active);
     border-radius: 10px;
 }

 /* begin profile */

 main section.profile {
     padding: 40px 20px 30px 20px;
     height: auto;
     border-radius: 20px;
     background-color: var(--background-color-secondary);
 }

 section.profile header {
     text-align: center;
 }

 section.profile header figure {
     border-radius: 20px;
     width: 70%;
     margin: 0 auto;
     background-color: var(--background-color-tertiary);
     max-width: 300px;
 }

 section.profile header figure img {
     width: 100%;
     aspect-ratio: 1;
     object-fit: contain;
 }

 section.profile header h1 {
     color: var(--primary-color-text-primary);
     margin-top: 20px;
     margin-bottom: 10px;
     font-size: 1.1rem;
     text-align: center;
     font-weight: 700;
     width: 100%;
 }

 section.profile header>div {
     display: flex;
     flex-direction: column;
     text-align: center;
 }

 section.profile header span {
     background-color: var(--background-color-span);
     color: var(--primary-color-text-primary);
     font-size: 0.8rem;
     padding: 3px 5px;
     font-weight: 500;
     border-radius: 5px;
     text-align: center;
     width: max-content;
     max-width: 100%;
     margin: 0 auto;
 }

 section.profile .info-section {
     width: 100%;
     display: flex;
     gap: 10px;
     margin-bottom: 20px;
 }

 section.profile .info-section span {

     flex: 0 0 auto;
     background-color: var(--background-color-span);
     width: 30px;
     height: 30px;
     border-radius: 5px;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 section.profile .info-section span i {
     color: var(--primary-color-active);
     margin: 0;
 }

 section.profile .info-section>div {
     width: calc(100% - 30px);
     display: flex;
     flex-direction: column;
     align-items: start;
     justify-content: center;
 }

 section.profile .info-section div .title {
     color: var(--primary-color-icon);
     font-weight: 900;
     font-size: 0.7rem;
 }

 section.profile .info-section div .description {
     color: var(--primary-color-text-primary);
     font-weight: 500;
     font-size: 0.9rem;
     max-width: 100%;
     white-space: normal;
     word-wrap: break-word;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
 }

 section.profile hr {
     margin: 20px auto;
     border: none;
     height: 1px;
     background-color: var(--background-color-tertiary)
 }

 section.profile footer {
     margin-top: 40px;
 }

 section.profile footer ul {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     gap: 10px;
 }

 section.profile footer ul li i {
     color: var(--primary-color-icon);
     font-size: 1.2rem;
 }

 /* end section profile */

 /* begin content */

 main section.content {
     padding: 40px 20px 30px 20px;
     height: auto;
     border-radius: 20px;
     background-color: var(--background-color-secondary);
     display: flex;
     flex-direction: column;
     gap: 20px;
     position: relative;
     overflow-x: hidden;
 }

 main section.content nav {
     position: absolute;
     top: 0;
     right: 0;
     width: auto;
     background-color: var(--background-color-nav);
     padding: 20px 30px;
     border-top-right-radius: 20px;
     border-bottom-left-radius: 20px;
 }

 main section.content nav ul {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     gap: 20px;
     margin: 0;
     padding: 0;
     list-style: none;
 }

 main section.content nav ul li,
 main section.content nav ul li a {
     color: var(--primary-color-text-primary);
     cursor: pointer;
     font-weight: 800;
     font-size: 1rem;
     text-align: center;
 }

 main section.content nav ul li:hover,
 main section.content nav ul li a:hover {
     color: var(--primary-color-active);
 }

 main section.content nav ul li a.active {
     color: var(--primary-color-active);
 }

 main section.content>section {
     display: none;
 }

 main section.content>section.active {
     display: block;
 }

 main section.content>section h2 {
     color: var(--primary-color-text-primary);
     font-weight: 800;
     font-size: 22px;
 }

 main section.content>section>hr {
     margin-top: 20px;
     width: 50px;
     border: none;
     height: 5px;
     border-radius: 5px;
     background-color: var(--primary-color-active);
 }

 main section.content>section .contenido {
     margin-top: 20px;
     color: var(--primary-color-text-secondary);
     overflow: hidden;
     width: 100%;
 }

 main section.content>section .contenido p {
     line-height: 1.7;
 }

 main section.content>section .contenido h3 {
     color: var(--primary-color-text-primary);
     font-weight: 800;
     font-size: 1.2rem;
 }

 /* end content */


 /* begin section resume */
 .resume-component {
     display: flex;
     flex-direction: column;
     gap: 20px;
     padding: 20px;
 }

 .resume-component .title {
     display: grid;
     grid-template-columns: 30px 1fr;
     gap: 10px;
 }

 .resume-component .title i {
     width: 30px;
     color: var(--primary-color-icon-active);
     font-size: 1.3rem;
     border-radius: 100%;
     text-align: center;
 }

 .resume-component .title h3 {
     color: var(--primary-color-text-primary);
     font-weight: 800;
     font-size: 1.1rem;
 }

 .resume-component .items {
     display: flex;
     flex-direction: column;
 }

 .resume-component .items .item {
     display: grid;
     grid-template-columns: 30px 1fr;
     padding: 10px 0;
 }

 .resume-component .items .item .icon {
     display: flex;
     flex-direction: column;
     width: 30px;
     justify-content: center;
     align-items: center;
 }

 .resume-component .items .item i {
     color: var(--primary-color-icon-active);
     font-size: 0.7rem;
     border-radius: 100%;
     box-shadow: 0 0 10px var(--background-color-tertiary);
 }

 .resume-component .items .item hr {
     margin-bottom: -10px;
     width: 2px;
     height: calc(100%);
     border: none;
     background-color: var(--background-color-tertiary);
 }

 .resume-component .items .item .info {
     display: flex;
     flex-direction: column;
     gap: 5px;
     padding-left: 10px;
 }

 .resume-component .items .item .info .date {
     color: var(--primary-color-active);
 }

 .resume-component .items .item .info h4 {
     color: var(--primary-color-text-primary);
     font-weight: 800;
     font-size: 0.9rem;
 }

 .resume-component .items .item .info p {
     color: var(--primary-color-text-secondary);
     font-weight: 500;
     font-size: 0.8rem;
 }

 .resume-component .items .item .info .type_company a {
     color: var(--primary-color-text-secondary);
     text-decoration: none;
     font-weight: 700;
 }

 .resume-component .items .item .info .type_company a:hover {
     color: var(--primary-color-active);
     text-decoration: underline;
 }

 /* end section resume */

 /* begin section portfolio */
 .portfolio .tabs {
     display: flex;
     flex-direction: row;
     gap: 20px;
     width: 100%;
     overflow-x: auto;
 }

 .portfolio .tabs .tab {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     border-radius: 10px;
     padding: 10px 20px;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
 }

 .portfolio .tabs .tab h3 {
     color: var(--primary-color-text-primary);
     font-weight: 600;
     font-size: 0.9rem;
 }

 .portfolio .tabs .tab.active {
     background-color: var(--primary-color-active);
 }

 .portfolio .tabs .tab:hover {
     background-color: var(--primary-color-active);
 }

 .portfolio .items {
     display: grid;
     margin-top: 30px;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     gap: 20px;
 }

 .portfolio .items .item {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .portfolio .items .item .img {
     display: flex;
     background-color: var(--background-color-tertiary);
     flex-direction: column;
     align-items: center;
     padding: 10px;
     border-radius: 20px;
     justify-content: center;
     width: calc(100% - 20px);
     height: 150px;
     position: relative;
 }

 .portfolio .items .item .img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 10px;
 }

 .portfolio .items .item .img .view_button {
     position: absolute;
     display: none;
     opacity: 0;
     top: 0;
     left: 0;
     background-color: rgba(var(--background-color-span-rgb), 0.5);
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 20px;
     transition: all 0.2s ease-in-out;
 }

 .portfolio .items .item:hover .img .view_button {
     display: flex;
     opacity: 1;
 }

 .portfolio .items .item .img .view_button a {
     color: var(--primary-color-text-primary);
     padding: 5px;
     background-color: var(--background-color-span);
     font-size: 1.2rem;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 30px;
     height: 30px;
     border-radius: 10px;
 }

 .portfolio .items .item .img .view_button a i {
     color: var(--primary-color-icon-active);
     font-size: 1.2rem;
 }

 .portfolio .items .item .info {
     display: flex;
     flex-direction: column;
     gap: 10px;
     width: 100%;
 }

 .portfolio .items .item .info h3 {
     color: var(--primary-color-text-primary);
     font-weight: 800;
     font-size: 1rem;
 }

 .portfolio .items .item .info span {
     display: flex;
     margin: 0;
     flex-direction: column;
     gap: 5px;
     list-style: none;
 }


 /* end section portfolio */


 /*******************************************************
 *                                                     *
 *                COMPONENTES DEL SISTEMA              *
 *            (Sección de componentes principales)     *
 *                                                     *
 * A partir de aquí se encuentran los componentes      *
 * desarrollados para el funcionamiento del sistema.   *
 * Cada componente está diseñado para cumplir con      *
 * especificaciones precisas y optimizar la lógica.    *
 *                                                     *
 *******************************************************/


 /* begin components cards */
 .cards {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 20px;
     margin-top: 20px;
     margin-bottom: 20px;
 }

 .cards .card {
     background-color: var(--background-color-span);
     border-radius: 20px;
     padding: 20px;
     display: flex;
     flex-direction: row;
     gap: 20px;
     transition: all 0.2s ease-in-out;
 }

 .cards .card i {
     color: var(--primary-color-icon-active);
 }

 .cards .card .info {
     display: flex;
     flex-direction: column;
     justify-content: start;
     align-items: center;
     gap: 10px;
     align-items: start;
 }

 .cards .card h2 {
     color: var(--primary-color-text-primary);
     font-weight: 800;
     font-size: 1.2rem;
     text-align: start;
 }

 .cards .card p {
     color: var(--primary-color-text-primary);
     font-weight: 500;
     font-size: 0.8rem;
 }

 /* end components cards */

 /* begin componente skills */
 .skills-component {
     display: flex;
     flex-direction: column;
     gap: 20px;
     background-color: var(--background-color-nav);
     padding: 20px;
     margin-top: 20px;
     border-radius: 20px;
 }

 .skills-component .items {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .skills-component .items .item {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .skills-component .items .item p {
     color: var(--primary-color-text-primary);
     font-weight: 800;
     margin: 0;
     font-size: 0.9rem;
 }

 .skills-component .items .item .percentage {
     color: var(--primary-color-text-secondary);
     font-weight: 500;
     font-size: 0.9rem;
     margin-left: 10px;
 }

 /* end componente skills */

 /* begin componente progress bar */
 .progress {
     width: 100%;
     height: 8px;
     background-color: var(--background-color-tertiary);
     border-radius: 10px;
 }

 .progress-bar {
     height: 100%;
     background-color: var(--primary-color-active);
     border-radius: 10px;
 }

 /* end componente progress bar */

 /* begin carrousel images */
 .carrousel-images {
     width: 100%;
     display: flex;
     gap: 20px;
     overflow-x: auto;
     scroll-behavior: smooth;
     overscroll-behavior-x: contain;
     scroll-snap-type: x mandatory;
     padding-top: 10px;
     padding-bottom: 30px;
 }

 .carrousel-images .image {
     flex: 0 0 auto;
     width: 200px;
     height: 150px;
     scroll-snap-align: start;
 }

 .carrousel-images img {
     width: 100%;
     height: 100%;
     object-fit: contain;
 }

 .carrousel-images::-webkit-scrollbar {
     height: 7px;
 }

 .carrousel-images::-webkit-scrollbar-track {
     background: var(--background-color-span);
 }

 .carrousel-images::-webkit-scrollbar-thumb {
     background: var(--primary-color-active);
     border-radius: 10px;
 }

 /* end carrousel images */

 /* begin carrousel videos tiktok */
 .carrousel-videos-tiktok {
     display: flex;
     flex-direction: column;
     padding-top: 10px;
     padding-bottom: 30px;
 }

 .carrousel-videos-tiktok .imagen_miniatura {
     background: url("/assets/miniatura_tiktok_1.webp");
     aspect-ratio: 16/9;
     width: 100%;
     background-size: cover;
     background-repeat: no-repeat;
     cursor: pointer;
     position: relative;
     border-radius: 20px;
 }

 .carrousel-videos-tiktok .imagen_miniatura .view_button {
     position: absolute;
     display: none;
     opacity: 0;
     top: 0;
     left: 0;
     background-color: rgba(var(--background-color-span-rgb), 0.5);
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 20px;
     transition: all 0.2s ease-in-out;
 }

 .carrousel-videos-tiktok .imagen_miniatura .view_button a {
     color: var(--primary-color-text-primary);
     text-decoration: none;
 }

 .carrousel-videos-tiktok .imagen_miniatura:hover .view_button {
     display: flex;
     opacity: 1;
 }

 .carrousel-videos-tiktok .imagen_miniatura:hover .view_button a {
     padding: 5px;
     background-color: transparent;
     font-size: 1.2rem;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     height: 100%;
     border-radius: 10px;
 }

 .carrousel-videos-tiktok .imagen_miniatura:hover .view_button a i {
     color: var(--primary-color-icon-active);
     font-size: 1.2rem;
     width: 30px;
     height: 30px;
 }

 .carrousel-videos-tiktok .imagen_miniatura .view_button a:hover,
 .carrousel-videos-tiktok .imagen_miniatura .view_button a:active,
 .carrousel-videos-tiktok .imagen_miniatura .view_button a:focus {
     color: var(--primary-color-active);
 }

 .carrousel-videos-tiktok .footer {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 20px;
 }

 .carrousel-videos-tiktok .footer a {
     color: var(--primary-color-text-primary);
     font-weight: 800;
     font-size: 1rem;
 }

 .carrousel-videos-tiktok .footer a:hover {
     color: var(--primary-color-active);
 }

 /* end carrousel videos tiktok */


 /* begin media queries */
 @media (max-width: 992px) {
     main section.content nav {
         width: calc(100% - 60px);
     }


     main section.content {
         padding: 80px 20px 30px 20px;
     }

 }

 @media (max-width: 768px) {
     main {
         grid-template-columns: 1fr;
         width: calc(100% - 40px);
     }

     main section.profile header {
         display: grid;
         grid-template-columns: 1fr 1fr;
     }

     main section.profile header>div {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
     }

     .carrousel-videos-tiktok .imagen_miniatura {
         background: url("/assets/miniatura_tiktok_3_4.webp");
         aspect-ratio: 9/16;
         object-fit: contain;
         background-repeat: no-repeat;
     }
 }

 @media (max-width: 480px) {
     main section.profile header {
         display: grid;
         grid-template-columns: 1fr;
     }

     main section.content nav ul li a {
        font-size: 0.9rem;
     }
 }

 /* end media queries */