@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

:root{
      --primary-colorFondo: rgb(10, 33, 50);
      --primary-color-Letras: white;
      --primary-color-FiguraIzquierda: white;
      --primary-color-IconosNav: rgb(2, 61, 110);
      --primary-color-SombraIconosNav: rgb(15, 15, 15);
      --primary-color-cursorRadios: rgba(58, 64, 129, 0.739);
      --opacidadCursorRadios: 35%;
      --primary-opacity-cristal: rgba(255, 255, 255, 0.30);
      --boxShadowFigura:  rgba(20, 20, 20, 0.89);
      --scrollbar: 0;
      --primary-color-LetrasSpanNav: white;

      /*Tarjetas Cursos Badges Certifications*/
      --backgroundCCI: #D8E3FA;
      --grayCCI: #EAEAEC;
      --primaryCCI: #29283F;
      --primary-violetCCI: #4c6dfc;

        /* Changes the primary theme color to purple using primitives */
        --sl-color-primary-50: var(--sl-color-purple-50);
        --sl-color-primary-100: var(--sl-color-purple-100);
        --sl-color-primary-200: var(--sl-color-purple-200);
        --sl-color-primary-300: var(--sl-color-purple-300);
        --sl-color-primary-400: var(--sl-color-purple-400);
        --sl-color-primary-500: var(--sl-color-purple-500);
        --sl-color-primary-600: var(--sl-color-purple-600);
        --sl-color-primary-700: var(--sl-color-purple-700);
        --sl-color-primary-800: var(--sl-color-purple-800);
        --sl-color-primary-900: var(--sl-color-purple-900);
        --sl-color-primary-950: var(--sl-color-purple-950);

        --sl-color-neutral-600: #ffffff; 
        --sl-color-neutral-inactivas: rgb(172, 172, 172);

        --sl-background-hiberus: rgba(31, 31, 80, 0.501);
        --sl-background-ktuin: rgba(148, 31, 31, 0.53);

        --pill-color_azul: #5992c2; /* Color por defecto */
        --pill-color_verde:  #306c52; 
        --pill-color_morado:  #642c8a; 
        --pill-color_naranja: #ff7904;
        --pill-color_rojo: #a64949;
        --pill-color_verdeAzulado: #279f85;
        --pill-color_rosa: #61355a;

        --background-color-recomendation:  #1c2d47;
        --color-letras-autor: #b0b0b0; 


}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    
}


html {
	scroll-behavior: smooth;
}


#bar{
    position: fixed;
    width: 100vw;
    height: 10px;
    transition: all linear .2s;
    -webkit-transition: all linear .2s;
    -moz-transition: all linear .2s;
    -ms-transition: all linear .2s;
    -o-transition: all linear .2s;
    background: white;
    box-shadow: 0 0 10px 0px rgb(12, 31, 62);
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    top: 0;
    left: 0px;
    z-index: 1000;
    overflow: hidden;
}

::-webkit-scrollbar{
    width: 0px;
    left: 0px;
}

.scroll-progress{
    width: 0%;
    background: linear-gradient(
		90deg, rgb(255, 192, 1) 0%, 
		rgb(215, 226, 0) 16.15%, 
		rgb(128, 211, 74) 33.85%, 
		rgb(0, 214, 136) 50.52%,
	    rgb(1, 208, 192) 66.15%, 
		#4bd7e3 81.25%, 
		#625BFE 100%
	);
    overflow:hidden;
    height: 0.65rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
}

body{
    background-color: var(--primary-colorFondo);
    color: #ededed;
    margin-left: 10%;
    max-height: 100vh;
    overflow-y: scroll;
    scrollbar-color: #00c6ff #242942;

}


.light_theme{

    --primary-colorFondo: #f6f6f6;
    --primary-color-Letras: rgb(8, 26, 39);
    --primary-color-FiguraIzquierda: rgb(0, 51, 81);
    --primary-color-IconosNav: rgb(255, 255, 255);
    --primary-color-SombraIconosNav:  white;
    --primary-color-cursorRadios: rgba(4, 129, 245, 0.098);
    --opacidadCursorRadios: 20%;
    --primary-fondo-cristal: rgba(255, 255, 255, 0.60);
    --boxShadowFigura:  rgba(49, 49, 49, 0.375);
    --primary-color-LetrasSpanNav: black;
    --sl-color-neutral-600: #00033a; 
    --sl-background-hiberus: rgba(16, 16, 81, 0.883);
    --sl-color-neutral-inactivas: rgba(26, 27, 88, 0.59);
    --sl-background-ktuin: rgb(131, 37, 37);

    --pill-color_azul: #5992c2; /* Color por defecto */
    --pill-color_verde:  #306c52; 
    --pill-color_morado:  #642c8a; 
    --pill-color_naranja: #a75300;
    --pill-color_rojo: #ff8080;
    --pill-color_verdeAzulado: #279f85;
     --pill-color_rosa: #61355a;
     

    --background-color-recomendation:  #d7ddf4;
    --color-letras-autor: #525f6f; 


}





.header{
    position: relative;
    width: 90%;
    margin-top: 1.5%;
    padding: 10px 9%;
    display: flex;
    justify-content:center;
    align-items: center;
    z-index: 10;
}

#a_portafolio{
    margin-left: 0px;
    text-decoration: none;
    color: var(--primary-color-Letras);
    font-size: 40px;
    font-weight: bolder;
}
  

#logo{
   width: 90px;
   margin-right: 10px;
}

#herramientas{
    position: fixed;
    top: 15px;
    right: 30px;
    z-index: 900;
}

.home{
   position: relative;
   height: 80vh;
   display: flex;
   align-items: center; 
   padding: 0 5%;
   z-index: 2;
}

.home-content{
    max-width: 800px;
    z-index: 5;
    margin-left: 10%;

}


#textH1{
    display: flex;

    font-size: 51px;
    font-weight:700;
    color: var(--primary-color-Letras);
    z-index: 5;
    
  }
  
  .listaTextH1{
    margin-left: 10px;
  }
  
  .containerTextH1{
    display: flex;
    flex-direction: column;
    
   
  }
  
  
  .itemTextH1:nth-child(1){
    position: absolute;
    animation: roll 8s ease 1s  backwards;
    -webkit-animation: roll 8s ease 1s  backwards;
    animation-delay: 0s;
    opacity: 0;
  }
  .itemTextH1:nth-child(2){
    position: absolute;
    animation: roll 8s ease 1s  backwards;
    -webkit-animation: roll 8s ease 1s  backwards;
    animation-delay: 2s;
    opacity: 0;
  }
  .itemTextH1:nth-child(3){
    position: absolute;
    animation: roll4 8s ease 1s  backwards;
    -webkit-animation: roll4 8s ease 1s  backwards;
    animation-delay: 4s;
    opacity: 1;
  }
  
  

  /** Start TabGroup Academic*/

    /* Estilos para el contenedor de las pestañas */
    sl-tab-group {
        z-index: 5;
    /* Cambia el color de la barra inferior de las pestañas */
    --track-color: #555;
    /* El color del texto de la pestaña activa y del indicador */
    --indicator-color:  var(--sl-color-neutral-600);
    }

    /* Estilos de las pestañas individuales (inactivas) */
    sl-tab::part(base) {
    /*Colordeltexto*/color: var(--sl-color-neutral-inactivas);
    /*Eliminaelfondodelaspestañas*/background-color: transparent;
    /*Añadeunespaciadointeriorparaqueseveanmásgrandes*/padding: 1rem 1.5rem;
    /*Suavizaloscambiosconunatransición*/transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}

    /* Estilos para la pestaña activa */
    sl-tab[aria-selected="true"]::part(base) {
    /* El color del texto se vuelve blanco al estar activo */
    color: var(--sl-color-neutral-600);
    /* Elimina el fondo si el tema oscuro está activado */
    background-color: transparent;
    }

    /* Estilos al pasar el ratón por encima */
    sl-tab:hover::part(base) {
    /* El color del texto se vuelve blanco al pasar el ratón */
     color: var(--sl-color-neutral-600);
    }

    /* Centra los elementos de la barra de navegación */
    .centered-tabs::part(nav) {
    display: flex;
    justify-content: center;
    }
    /** End TabGroup Academic*/


  @keyframes roll{
     0% {
      opacity: 0;
      transform: translate3d(0, -70%, 0);
      -webkit-transform: translate3d(0, -70%, 0);
      -moz-transform: translate3d(0, -70%, 0);
      -ms-transform: translate3d(0, -70%, 0);
      -o-transform: translate3d(0, -70%, 0);
    }
    2.5%, 25% {
      opacity: 1;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
    }
    27.5%, 50%{
      opacity: 0;
      transform: translate3d(0, 20%, 0);
      -webkit-transform: translate3d(0, 20%, 0);
      -moz-transform: translate3d(0, 20%, 0);
      -ms-transform: translate3d(0, 20%, 0);
      -o-transform: translate3d(0, 20%, 0);
  }
  
  }

  @keyframes roll4{
    0% {
     opacity: 0;
     transform: translate3d(0, -70%, 0);
     -webkit-transform: translate3d(0, -70%, 0);
     -moz-transform: translate3d(0, -70%, 0);
     -ms-transform: translate3d(0, -70%, 0);
     -o-transform: translate3d(0, -70%, 0);
   }
   2.5%, 25% {
     opacity: 1;
     transform: translateZ(0);
     -webkit-transform: translateZ(0);
     -moz-transform: translateZ(0);
     -ms-transform: translateZ(0);
     -o-transform: translateZ(0);
   }
 }

.containerH3 .text{
    
    font-size: 32px;
    font-weight: 700;
    color: #00abf0;
   
   
    top: 270px;
    height: auto;
    width: auto;
}
 .containerH3 .text.first-text{
    content: "";
    
    
 }

 .containerH3 .text.sec-text{
    content: "";
    
    visibility: hidden;
    
 }

 .containerH3 .text.third-text{
    content: "";
    visibility: hidden;
 }



.home-content p{
    font-size: 16px;
    text-align:justify;
    margin: 20px 0px 40px ;
    padding-top: 40px;
    color: var(--primary-color-Letras);
    z-index: 5;
}

.home-content .btn-box{
    display: flex;
    justify-content: space-between;
    width: 345px;
    height: 50px;
  
}

.global-section-Home{
    display: flex;
    justify-content:space-evenly;


}

.btn-box a{
    position: relative;
    display:inline-flex;
    justify-content: center;
    align-items:center;
    width:  150px;
    height: 100%;
    background: #00abf0;
    border: 2px solid #00abf0;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    font-size: 19px;
    color: #081b29;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 1px;
    z-index: 1;
    overflow: hidden;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}

.btn-box a:hover{
    color: #00abf0;
}

.btn-box a:nth-child(2) {
background: transparent;
    color: #00abf0;
}

.btn-box a:nth-child(2):hover {
color:#081b29;

}


.btn-box a:nth-child(2)::before {
    background: #00abf0;
}


.btn-box a::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: #081b29;
    z-index: -1;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}

.btn-box a:hover::before{
    width: 100%;
}

.home-sci{
    position: absolute;
    left: 24%;
    bottom: 40px;
    width: 210px;
    display: flex;
    justify-content: space-between;
}

.home-sci a{
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 2px solid #00abf0;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    font-size: 20px;
    color: #00abf0;
    text-decoration: none;
    z-index: 1;
    overflow: hidden;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}

.home-sci a:hover{
    color: #081b29;
}

.home-sci a::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: #00abf0;
    z-index: -1;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;

}

.home-sci a:hover::before{
    width: 100%;
}



.container {

    position: absolute;
    top: 15rem;
    right: 25%;
    z-index: 10;
} 
  
.profile-wrapper {
    width: 21rem;
    height: 21rem;
    position: absolute;
    z-index: 10;
}

.profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    overflow: hidden;
    width: 24rem;
    height: 25.5rem;
    border-radius: 25rem;
    box-shadow: 0 5px 18px rgb(0, 0, 0);
    cursor: pointer;
    transition: 0.5s;
    z-index: 10;
    -webkit-border-radius: 25rem;
    -moz-border-radius: 25rem;
    -ms-border-radius: 25rem;
    -o-border-radius: 25rem;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}
 
.profile .profile-image {
    position: absolute;
    border-radius: 25rem;
    width: 100%;
    height: 100%;
    z-index: 10;
    transition: .5s;
    -webkit-border-radius: 25rem;
    -moz-border-radius: 25rem;
    -ms-border-radius: 25rem;
    -o-border-radius: 25rem;
}

.profile-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 25rem;
    -webkit-border-radius: 25rem;
    -moz-border-radius: 25rem;
    -ms-border-radius: 25rem;
    -o-border-radius: 25rem;
}

.profile:hover img {
    opacity: 1;
    transition: 1.5s;
    border-radius: 15rem;
    -webkit-border-radius: 15rem;
    -moz-border-radius: 15rem;
    -ms-border-radius: 15rem;
    -o-border-radius: 15rem;
    -webkit-transition: 1.5s;
    -moz-transition: 1.5s;
    -ms-transition: 1.5s;
    -o-transition: 1.5s;
}

.profile:hover .profile-image {
    transform: translateY(-100%);
    transition: all 0.7s;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    -ms-transition: all 0.7s;
    -o-transition: all 0.7s;
}

.profile:hover .profile-bio {
    opacity: 0.9;
}

.social-icons {
    position: absolute;
    display: flex;
    gap: 0.75rem;
    z-index: 3;
    bottom: 6rem;
}
  
.social-icons li {
    list-style: none;
}

.social-icons li a {
    position: relative;
    display: block;
    display: grid;
    place-items: center;
    background: #ffffff;
    font-size: 23px;
    font-weight: bold;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid #CDCDCD;
    border-radius: 0.5rem;
    transition: .2s;
    transform: translateY(2rem);
    opacity: 0;
    text-decoration: none;
    color: rgb(31, 68, 133);
}

.social-icons li a:hover {
    background-color: #ffffff;
    transition: .2s;
}

.social-icons li a svg {
    background-color: #ffffff;
    transition: .2s;
}
.social-icons li a img {
    background-color: #ffffff;
    transition: .2s;
    width: 1.5rem;
    height: 1.5rem;
}

.social-icons li a:hover svg{
    color: rgb(255, 255, 255);
    transition: 0.8s;
    transform: rotateY(360deg);
}


.social-icons li a:hover img{
    color: rgb(255, 255, 255);
    transition: 0.8s;
    transform: rotateY(360deg);
    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
}


.profile:hover .social-icons li a {
    opacity: 1; 
}

.profile:hover li:nth-child(1) a {
    transition-delay: 0.1s;
  
}

.profile:hover li:nth-child(2) a {
    transition-delay: 0.2s;
}

.profile:hover li:nth-child(3) a {
    transition-delay: 0.3s;
}

.profile:hover li:nth-child(4) a {
    transition-delay: 0.4s;
  
}

.profile-name {
    transition-duration: 0.5s;
    position: absolute;
    bottom: 20;
    left: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    padding: 6rem 3rem;
    padding-left: 4rem;
    z-index: 1;
    color: #333333;
    background-color: #fff;
    text-align: left;
    border: 10px inset  rgb(44, 179, 242);
    transition-duration: 0.5s;
    border-radius: 25rem;
    -webkit-border-radius: 25rem;
    -moz-border-radius: 25rem;
    -ms-border-radius: 25rem;
    -o-border-radius: 25rem;
}

.profile:hover .profile-name {
    background-color: #ffffff;
}
#nombreProfile {
    margin-bottom: 1rem;
    padding-top: 0;
}

.containerNav{
    position: fixed;
    align-items: start;
    top: 28%;
    left: 20px;
    width: 60px;
    display: block;
    z-index: 101;
    
}



.formaIzquierda{
    position: fixed;
    display: block;
    left:-200px;
    top: 5%;
    height: 860px;
    width: 400px;
    backdrop-filter: blur(10px);
    background-color: var(--primary-color-FiguraIzquierda);
   
    border: 5px solid rgb(255, 255, 255);
    clip-path: polygon(40% 2%, 72% 28%, 72% 70%, 40% 94%);
    z-index: 100;
    filter: blur(10px);
    -webkit-filter: blur(10px);
}

.containerNav a{
    display: block;
    padding:2%;
    margin: 2%;
    
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    color: var(--primary-color-IconosNav);
    font-weight: bolder;
    margin-top: 10px;
}

.elementos a > span{
    position: absolute;
    margin-top: 20px;
    margin-left: 60px;
    opacity: 0;

    left: -20px;
    
    transition-duration: 0.5s;
    color: var(--primary-color-LetrasSpanNav);
    
}

.elementos a:hover > span{
    position: absolute;
    left: 30px;
    opacity: 1;
    animation: opacity 0.5s    ;
    -webkit-animation: opacity 0.5s    ;
} 

@keyframes opacity{
    0%, 50% {
     opacity: 0;
     
   }
   51%, 100%{
    opacity: 1;
   }
 }


.elementos a svg{
    width: 90%;
    height: 100%;
    stroke: var(--primary-color-IconosNav);
    transition-duration: 0.3s;
    z-index: 1;
}


.elementos a:hover svg{
    width: 54px;
    height: 100%;
    stroke: var(--primary-color-IconosNav);
    transition-duration: 0.2s;
    box-shadow: -3px 3px 0px var(--primary-color-SombraIconosNav);
    border-radius: 25%;
    -webkit-border-radius: 25%;
    -moz-border-radius: 25%;
    -ms-border-radius: 25%;
    -o-border-radius: 25%;
}

.elementos a:focus-within svg{
    width: 90%;
    height: 85%;
    stroke: var(--primary-color-IconosNav);
    transition-duration: 0.1s;
}



.formaDerecha{
    position: fixed;
    right: -170px;
    top: 10%;
    height: 70%;
    width: 20%;
    display: flex;
    background-color: rgba(255, 255, 255, 0);
    clip-path: polygon(58% 5%, 30% 30%, 30% 65%, 55% 92%);
}

.seccionesNav{
    position: relative;
    width: 83%;
    margin-left:5%;
    margin-right: 5%;
    
    left: 0px;
    display: block;
    text-align: center;
    z-index: 10;
  
}

.home{
   position: relative;
   height: 80vh;
   display: flex;
   align-items: center; 
   padding: 0 5%;
   z-index: 2;
}

.home-content{
    max-width: 800px;
    z-index: 5;
    margin-left: 10%;

}

.home-content{
    max-width: 800px;
    z-index: 5;
    margin-left: 10%;

}


#proyectos{
    margin-top: 200px;
    z-index: 1000;
}


.titulos{
    text-align: center;
    font-size: 50px;
    color: var(--primary-color-Letras);
    margin-left: 0%;
    margin-top: 20px;
    z-index: 6;


  
}

.parrafos{
    margin-left: 10%;
    color: var(--primary-color-Letras);
    margin-left: 0%;
    z-index: 6;
   
}
/* --- Galería de Proyectos --- */
/* Contenedor principal de la galería. Usa Flexbox para centrar y manejar el espaciado. */
#contenedorArticulos {
    width: 100%;
    display: flex; /* Mantenemos Flexbox para centrar el grid */
    justify-content: center;
    padding: 5% 20px 200px 20px;
    box-sizing: border-box;
}

/* Configuración de la cuadrícula de proyectos */
.articles {
    display: grid; /* Habilitamos CSS Grid */
    /* Crea columnas que se ajustan automáticamente.
       minmax(280px, 1fr) asegura que cada tarjeta tenga un ancho mínimo de 280px y un máximo de 1 fracción del espacio disponible. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem; /* Espacio uniforme entre los recuadros */
    max-width: 75rem; /* Ancho máximo para el contenedor de la cuadrícula */
}

/* Estilos de cada recuadro de proyecto */
.project-card {
    background-color: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    border: 4px solid #8c8c8c;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    height: 100%;
}

/* Efecto al pasar el cursor (hover) en la tarjeta completa */
.project-card:hover {
    /* Mueve la tarjeta ligeramente hacia abajo y reduce su tamaño */
    transform: translateY(2px) scale(0.98);
    /* Reduce la sombra para un efecto de hundimiento */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border-color: #dfdfdf;
}

/* Estilo de la figura y la imagen dentro de la tarjeta */
.project-card figure {
    width: 100%;
    height: 16rem; 
    margin: 0;
    overflow: hidden;
}

/* Título de la tarjeta, centrado y con mejor color */
.project-card h2 {
    text-align: center;
    margin: 0;
    padding: 0 10px;
    font-size: 1.2rem;
    color: #000c22;
    line-height: 1.4;
    transition: color 0.3s ease-out;
}

.project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
    transition: 0.5s; /* Ajustado a 0.5s para una transición más rápida */
}


/* Estilos para el visor de imagen a pantalla completa */
.fullscreen-image-viewer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro semitransparente */
    display: flex; /* Para centrar la imagen */
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Asegura que esté por encima de todo */
    opacity: 0; /* Oculta el visor por defecto */
    visibility: hidden; /* Oculta el visor por defecto */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.fullscreen-image-viewer.active {
    opacity: 1;
    visibility: visible;
}

.fullscreen-image-viewer img {
    max-width: 90%; /* Limita el tamaño inicial de la imagen */
    max-height: 90%;
    object-fit: contain; /* Mantiene la relación de aspecto */
    cursor: grab; /* Cursor para indicar que se puede arrastrar */
    transition: transform 0.2s ease; /* Transición suave para el zoom */
    border-radius: 10px; /* Redondea las esquinas de la imagen */
}

/* Estilos para el zoom */
.fullscreen-image-viewer img.zoomed {
    transform: scale(1.5); /* Aumenta la escala al hacer zoom */
    cursor: grabbing; /* Cursor para indicar que se está arrastrando */
    max-width: none; /* Permite que la imagen crezca */
    max-height: none;
}
.modal-content img {
    border-radius: 20px;
    /*Puedesajustarelvalorparaunradiomayoromenor*/:;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

/* Efecto de la imagen al pasar el cursor (hover) */
.project-card:hover img {
    /*Aquísecambiaelvalordelaescalaparaquelaimagensereduzca*/transform: scale(0.99);
    -webkit-transform: scale(0.99);
    -moz-transform: scale(0.99);
    -ms-transform: scale(0.99);
    -o-transform: scale(0.99);
}

/* Estilos de la previsualización del artículo */
.article-preview {
    padding: 1rem 1.5rem; /* Padding ajustado para mejor aspecto */
    background-color: #fff;
    box-shadow: inset rgba(5, 32, 76, 0.22) 0px 5px 10px;
    border-radius: 0 0 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1; /* Ocupa el espacio restante en la tarjeta */
}

/* Estilos para el texto de previsualización (si existe) */
.article-preview p {
    margin: 0;
    font-size: 0.9rem;
    color: #393939; /* Color de texto más legible */
}

/* --- Ventana Modal --- */

.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10000;
    
}

.modal-container.show {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    background-color: #2c3444;
    padding: 50px;
    border-radius: 10px;
    max-width: 1000px;
    /*Seaumentóelanchomáximoparamejorvisibilidad*/width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    position: relative;
    transition: transform 0.3s ease;
    text-align: left;
    
    
}

.modal-container.show .modal {
    transform: scale(1);
}

/* Títulos dentro del modal */
.modal h2 {
    text-align: center;
    color: #1a2235;
    font-size: 2rem;
    margin-top: 0;
}

.modal h3, .modal h4 {
    color: #005498;
    border-bottom: 2px solid #6a9bd8;
    padding-bottom: 5px;
    margin-top: 25px;
}

.modal p {
    margin: 10px 0;
    color: #000000;
}


/* Estilo del contenedor de las aptitudes */
.project-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

/* Estilo de cada "chip" de aptitud */
.skill-chip {
    background-color: #0051ae;
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    white-space: nowrap;
    font-family: Arial, Helvetica, sans-serif;
}

/* Estilo para la imagen en la parte superior del modal */
.modal-image-top {
    width: 100%;
    height: 70%;
    overflow: hidden;
    margin: -30px -30px 20px -30px;
    margin-top:20px;
    border-radius: 10px 10px 10px 10px;
    /*Usamosflexboxparacentrarlaimagenhorizontalyverticalmentesifueranecesario*/display: flex;
    justify-content: center;
    /*Centrahorizontalmente*/align-items: center;
    /*Centraverticalmentesielcontenedortienealturafija*//*Estableceunaalturafijaparaelcontenedorparaquelaimagentengaunespaciodondecentrarse*/height: 300px;

    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -ms-border-radius: 10px 10px 10px 10px;
    -o-border-radius: 10px 10px 10px 10px;
}

.modal-image-top img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    /*Mantienelaproporción*/display: block;
    object-fit: contain;
    margin: 0 auto;
    border-radius: 50px 50px 50px 50px;
    -webkit-border-radius: 50px 50px 50px 50px;
    -moz-border-radius: 50px 50px 50px 50px;
    -ms-border-radius: 50px 50px 50px 50px;
    -o-border-radius: 50px 50px 50px 50px;
}

/* Estilo para las listas de aptitudes */
.modal-body p strong {
    color: #000000;
}

/* Estilos de las imágenes dentro del modal */
.project-images {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
    justify-content: center;
}

.project-images img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* Para galerías de imágenes, puedes hacerlas más pequeñas */
    max-height: 300px;
    width: auto;
}

/* Estilos de los botones de enlace dentro del modal */
.project-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
}

.link-button {
    background-color: #153961;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    font-weight: bold;
    font-family: ;
    letter-spacing: 2px;
}

.link-button:hover {
    background-color: #4b8ac4;
}

.botonClose {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    font-weight: bold;
}
::-webkit-scrollbar{
    width: 1.2em;
    overflow-x: none;
}
::-webkit-scrollbar-track{
    border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    -ms-border-radius: 0.3em;
    -o-border-radius: 0.3em;
    background: #242942;
    margin-block: 0.25em;
}
::-webkit-scrollbar-thumb{
    background: #00c6ff;
    background: -webkit-linear-gradient(        to right, #00c6ff, #0072ff    );
    background: linear-gradient(        to right, #00c6ff, #0072ff    );
    border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    -ms-border-radius: 0.3em;
    -o-border-radius: 0.3em;
    scrollbar-color: blue;
    scrollbar-width: 0.3em;
}

.boton_traductor{
    stroke: var(--primary-color-Letras);
    position:absolute;
    top:40px;
    right: 150px;
    width: 40px;
    cursor: pointer;
    transition: 0.2s;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
    text-align: center;
    margin: 0 auto;
    text-decoration: none;
}

.boton_traductor:focus-within {
    width: 35px;
    transition-duration: 0.2s;
    stroke: rgb(167, 190, 224);
    text-decoration: none;
}

#icon{
    position:absolute;
    top:30px;
    right: 60px;
    width: 55px;
    cursor: pointer;
    
}


.light{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: radial-gradient(circle at var(--x) var(--y), var(--primary-color-cursorRadios) 20% ,  transparent var(--opacidadCursorRadios));
    filter: blur(150px);
    -webkit-filter: blur(150px);
    opacity: 70%;
    z-index: 1;
}

.modal-container{
    display: flex;
    background-color: rgba(0,0,0, 0.3);
    align-items: center;
    justify-content: center;
    position: fixed;
    pointer-events: none;
    opacity: 0;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 50;
    transition-duration: 0.3s;
    -webkit-animation: slide-fwd-center 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-fwd-center 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.show{
    transition-duration: 0.3s;
    pointer-events: auto;
    opacity: 1;
    -webkit-animation: slide-fwd-center 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-fwd-center 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    
}

.modal{

    display:block;
    position: fixed;
    background-color: #ffff;
    width: 900px;
    max-width: 100%;
    padding: 30px 50px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-align: center;
    z-index: 50;
    color: black;
    -webkit-animation: slide-fwd-center 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-fwd-center 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


.modal h1{
    margin: 1em;
}

.modal p{
    opacity: 0.7;
    font-size: 14px;
}

.botonClose{
    transition-duration: 0.3s;
    background-color: #45427a;
    border: 0;
    position: fixed;
    top: 0px;
    right: 10px;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    box-shadow: 0 2px 4px rgba(16, 11, 71, 0.2);
    color: #ffffff;
    font-size: 20px;
    font-weight:400;
    padding: 0 10px;
    margin-top: 15px;
}

.botonClose:hover{
    transition-duration: 0.3s;
    background-color: rgb(236, 0, 0);
}

footer{
    position: fixed;
    text-align: center;
    display: block;
    width: 100%;
    height: 5%;
    bottom: 0px;
    left: 0%;
    color: white;
    background-color: rgb(6, 39, 80);
    z-index: 1000;
}

footer p{
   margin-top: 0.5%;
}

/*Efecto Titulo Principal  "Porfolio"*/
.tracking-in-expand-fwd-top{ -webkit-animation:tracking-in-expand-fwd-top 1s cubic-bezier(.215,.61,.355,1.000) both; animation:tracking-in-expand-fwd-top 1s cubic-bezier(.215,.61,.355,1.000) both; }
/* ----------------------------------------------
 * Generated by Animista on 2024-6-15 8:46:5
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 @-webkit-keyframes tracking-in-expand-fwd-top{0%{letter-spacing:-.5em;-webkit-transform:translateZ(-700px) translateY(-500px);transform:translateZ(-700px) translateY(-500px);opacity:0}40%{opacity:.6}100%{-webkit-transform:translateZ(0) translateY(0);transform:translateZ(0) translateY(0);opacity:1}}@keyframes tracking-in-expand-fwd-top{0%{letter-spacing:-.5em;-webkit-transform:translateZ(-700px) translateY(-500px);transform:translateZ(-700px) translateY(-500px);opacity:0}40%{opacity:.6}100%{-webkit-transform:translateZ(0) translateY(0);transform:translateZ(0) translateY(0);opacity:1}}

/*Efecto Logo*/
.tilt-in-top-1{ -webkit-animation:tilt-in-top-1 0.5s cubic-bezier(.25,.46,.45,.94) both; animation:tilt-in-top-1 0.5s cubic-bezier(.25,.46,.45,.94) both; }

/* ----------------------------------------------
 * Generated by Animista on 2024-6-15 8:29:50
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 @-webkit-keyframes tilt-in-top-1{0%{-webkit-transform:rotateY(30deg) translateY(-300px) skewY(-30deg);transform:rotateY(30deg) translateY(-300px) skewY(-30deg);opacity:0}100%{-webkit-transform:rotateY(0deg) translateY(0) skewY(0deg);transform:rotateY(0deg) translateY(0) skewY(0deg);opacity:1}}@keyframes tilt-in-top-1{0%{-webkit-transform:rotateY(30deg) translateY(-300px) skewY(-30deg);transform:rotateY(30deg) translateY(-300px) skewY(-30deg);opacity:0}100%{-webkit-transform:rotateY(0deg) translateY(0) skewY(0deg);transform:rotateY(0deg) translateY(0) skewY(0deg);opacity:1}}

 /*Efecto Figura izquierda*/
 .tilt-in-left-1{ -webkit-animation:tilt-in-left-1 0.5s cubic-bezier(.25,.46,.45,.94) both; animation:tilt-in-left-1 0.5s cubic-bezier(.25,.46,.45,.94) both; }
 /* ----------------------------------------------
 * Generated by Animista on 2024-6-15 8:47:52
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes tilt-in-left-1{0%{-webkit-transform:rotateX(-30deg) translateX(-300px) skewX(-30deg);transform:rotateX(-30deg) translateX(-300px) skewX(-30deg);opacity:0}100%{-webkit-transform:rotateX(0deg) translateX(0) skewX(0deg);transform:rotateX(0deg) translateX(0) skewX(0deg);opacity:1}}@keyframes tilt-in-left-1{0%{-webkit-transform:rotateX(-30deg) translateX(-300px) skewX(-30deg);transform:rotateX(-30deg) translateX(-300px) skewX(-30deg);opacity:0}100%{-webkit-transform:rotateX(0deg) translateX(0) skewX(0deg);transform:rotateX(0deg) translateX(0) skewX(0deg);opacity:1}}

/*Efecto Home Contenido*/

.fade-in-bottom{-webkit-animation:fade-in-bottom .6s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in-bottom .6s cubic-bezier(.39,.575,.565,1.000) both}
/* ----------------------------------------------
 * Generated by Animista on 2024-6-16 9:34:44
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 @-webkit-keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}


 /* Efecto Contenedor Imagen texto redes sociales*/
 .slide-in-bck-bottom{-webkit-animation:slide-in-bck-bottom .6s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-bck-bottom .6s cubic-bezier(.25,.46,.45,.94) both}
/* ----------------------------------------------
 * Generated by Animista on 2024-6-16 9:38:33
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 @-webkit-keyframes slide-in-bck-bottom{0%{-webkit-transform:translateZ(700px) translateY(300px);transform:translateZ(700px) translateY(300px);opacity:0}100%{-webkit-transform:translateZ(0) translateY(0);transform:translateZ(0) translateY(0);opacity:1}}@keyframes slide-in-bck-bottom{0%{-webkit-transform:translateZ(700px) translateY(300px);transform:translateZ(700px) translateY(300px);opacity:0}100%{-webkit-transform:translateZ(0) translateY(0);transform:translateZ(0) translateY(0);opacity:1}}


/*Efecto Footer*/
.slide-in-blurred-bottom{ -webkit-animation:slide-in-blurred-bottom 1s cubic-bezier(.23,1.000,.32,1.000) both; animation:slide-in-blurred-bottom 1s cubic-bezier(.23,1.000,.32,1.000) both; }
/* ----------------------------------------------
 * Generated by Animista on 2024-6-15 8:55:13
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 @-webkit-keyframes slide-in-blurred-bottom{0%{-webkit-transform:translateY(1000px) scaleY(2.5) scaleX(.2);transform:translateY(1000px) scaleY(2.5) scaleX(.2);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-filter:blur(40px);filter:blur(40px);opacity:0}100%{-webkit-transform:translateY(0) scaleY(1) scaleX(1);transform:translateY(0) scaleY(1) scaleX(1);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes slide-in-blurred-bottom{0%{-webkit-transform:translateY(1000px) scaleY(2.5) scaleX(.2);transform:translateY(1000px) scaleY(2.5) scaleX(.2);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-filter:blur(40px);filter:blur(40px);opacity:0}100%{-webkit-transform:translateY(0) scaleY(1) scaleX(1);transform:translateY(0) scaleY(1) scaleX(1);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-filter:blur(0);filter:blur(0);opacity:1}}


/*Efecto Ventana emergente*/

.slide-fwd-center {
	-webkit-animation: slide-fwd-center 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-fwd-center 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-7-6 5:44:42
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-fwd-center
 * ----------------------------------------
 */
 @-webkit-keyframes slide-fwd-center {
    0% {
      -webkit-transform: translateZ(0);
              transform: translateZ(0);
    }
    100% {
      -webkit-transform: translateZ(160px);
              transform: translateZ(160px);
    }
  }
  @keyframes slide-fwd-center {
    0% {
      -webkit-transform: translateZ(0);
              transform: translateZ(0);
    }
    100% {
      -webkit-transform: translateZ(160px);
              transform: translateZ(160px);
    }
  }
  


#seccionCCI{
    position: absolute;
    top: 2300px;

    width: 100%;
    height: auto;
    z-index: 99;
}

#contenedorSeccionesCCI{
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 90%;
    margin-left: 80px;
    margin-right: 100px;
    height: auto;
    margin-bottom: 100px;
    color: var(--primary-color-Letras);
    z-index: 99;
}

#contenedorSeccionesCCI > .seccionCCI{
    transition-duration: 0.5s;
    height: auto ;
    padding: 10px;
   
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    margin-right: 10%;
    padding-right: 20px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    background: var(--primary-opacity-cristal);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(2px);
    z-index: 90;
    border: 1px solid rgba(255, 255, 255, 0.18);
    
    
}

#contenedorSeccionesCCI > .seccionCCI:hover{
    transition-duration: 0.5s;
    background: var(--primary-opacity-cristal);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(5px);
    z-index: 1;
    border: 3px solid rgba(255, 255, 255, 0.30);
}


#contenedorSeccionesCCI > #seccion1{
    transition-duration: 0.3s;
    background-color: rgb(255, 116, 9);
}

#contenedorSeccionesCCI > #seccion1:hover{
    transition-duration: 0.3s;
    background-color: rgba(251, 132, 73, 0.829);
    border: 3px solid   rgb(129, 65, 17);;
}

#contenedorRecomendaciones {
    display: flex;
    flex-direction: column;
    /* Elimina las propiedades redundantes de margin */
    margin: 0 auto 100px; 
    width: 90%;
    height: auto;
    margin-bottom: 200px;
    color: var(--primary-color-Letras);
    z-index: 100;
    padding: 2rem;
    /* Alinea el contenido del contenedor principal al centro */
    align-items: center; 
    text-align: center;
}

/* Contenedor de las dos cajas de recomendación */
.recommendation-grid {
    display: flex;
    gap: 20px; /* Espacio entre las cajas */
    flex-wrap: wrap; /* Permite que las cajas se envuelvan en pantallas pequeñas */
    justify-content: center; /* Centra las cajas horizontalmente */
    width: 100%;
}

.recommendation {
    flex: 1; /* Permite que las cajas se expandan y contraigan */
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    background-color: var(--background-color-recomendation); /* Añade un color de fondo para que se vean como cajas separadas */
    /* Alinea el texto a la izquierda, no al centro */
    text-align: left; 
    align-content: center;
}

.recommendation p {
    text-align: justify; /* Justifica el texto de los párrafos */
}

.author {
    margin-top: 1rem;
    font-style: italic;
    color: var(--color-letras-autor); /* Un color más suave para el autor */
    text-align: right; /* Alinea el nombre y puesto a la derecha */
}

#contenedorTecnologias {
    display: flex;
    flex-direction: column;

    margin: 0 auto 100px auto; 
    width: 90%;
    margin-left: 80px;
    margin-right: 100px;
    margin-bottom: 50px;
    height: auto;
    color: var(--primary-color-Letras);
    z-index: 100;

    padding: 2rem;
   /**background-color: #2a2a2a;*/ /* Un fondo oscuro para contrastar */
    color: white;
    
}

.titulos {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 2rem;
    text-transform: uppercase;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Cuadrícula adaptable */
    gap: 1.5rem; /* Espacio entre categorías */
}

/* Estilos base para todas las categorías */
.skill-category {
    /* Define la variable de color en el nivel de la categoría */
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Estilos para el texto dentro de la categoría */
.skill-category h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid white; /* Línea de color de la categoría */
    padding-bottom: 0.5rem;
}

.skill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem; /* Espacio entre las "pills" */
}

/* El resto de tus estilos... */

.skill-pill_azul {
    /* Usa la variable para el color de fondo */
    background-color: var(--pill-color_azul);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: transform 0.2s ease-in-out;
}


.skill-pill_azul:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.skill-pill_verde {
    /* Usa la variable para el color de fondo */
    background-color: var(--pill-color_verde);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: transform 0.2s ease-in-out;
}


.skill-pill_verde:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.skill-pill_morado {
    /* Usa la variable para el color de fondo */
    background-color: var(--pill-color_morado);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: transform 0.2s ease-in-out;
}


.skill-pill_morado:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.skill-pill_naranja {
    /* Usa la variable para el color de fondo */
    background-color: var(--pill-color_naranja);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: transform 0.2s ease-in-out;
}


.skill-pill_naranja:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.skill-pill_roja {
    /* Usa la variable para el color de fondo */
    background-color: var(--pill-color_rojo);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: transform 0.2s ease-in-out;
}


.skill-pill_roja:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.skill-pill_verdeAzulado {
    /* Usa la variable para el color de fondo */
    background-color: var(--pill-color_verdeAzulado);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: transform 0.2s ease-in-out;
}


.skill-pill_verdeAzulado:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.skill-pill_rosa {
    /* Usa la variable para el color de fondo */
    background-color: var(--pill-color_rosa);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: transform 0.2s ease-in-out;
}


.skill-pill_rosa:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


.skills-grid > div:nth-child(1) {
    background-color: #485abf; /* Azul oscuro */
}

.skills-grid > div:nth-child(1) h3 {
    border-bottom: 2px solid #0cc3fb;;
}

.skills-grid > div:nth-child(2) {
    background-color: #1b4d1d; /* Azul ligeramente más claro */
}

.skills-grid > div:nth-child(2) h3 {
    border-bottom: 2px solid #219f25;
}

.skills-grid > div:nth-child(3) {
    background-color: #3f1c60; /* Azul medio */
}

.skills-grid > div:nth-child(3) h3 {
    border-bottom: 2px solid #8d00c9;
}

/* Puedes seguir con esta lógica para más categorías */

.skills-grid > div:nth-child(4) {
    background-color: #b89944;
}

.skills-grid > div:nth-child(4) h3 {
    border-bottom: 2px solid #4f2f00;
}

.skills-grid > div:nth-child(5) {
    background-color: #6f2323;
}

.skills-grid > div:nth-child(5) h3 {
    border-bottom: 2px solid #3b1414;
}

.skills-grid > div:nth-child(6) {
    background-color: #307562;
}

.skills-grid > div:nth-child(6) h3 {
    border-bottom: 2px solid #1f4e3d;
}

.skills-grid > div:nth-child(7) {
    background-color: #98599bf3;
}

.skills-grid > div:nth-child(7) h3 {
    border-bottom: 2px solid #4e1f4e;
}




#seccionAcademica{
    position: absolute;
    width: 100%;
    height: auto;
    margin-left: 150px;
    margin-top: 50px;
    margin-bottom: 50px;
    z-index: 2;
}


/* Estilos del contenedor de cada panel */
.info-panel {
    background-size: cover;
    background-position: center;
    background-color: rgb(18, 27, 41); /* Oscurece la imagen para que el texto sea legible */
    background-blend-mode: overlay; /* Mezcla la imagen y el color de fondo */
    
    /* El resto de tus estilos de panel... */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    text-align: center;
    border-radius: 40px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 3px solid rgba(255, 255, 255, 0.8);
    margin: 20px auto;
    max-width: 800px;
}

/* Estilos para el panel de Desarrollador */
sl-tab-panel[name="desarrollador"] .info-panel {
  background-image: url('./Media/losEnlaces.jpg'); 
}

/* Estilos para el panel de Soporte IT */
sl-tab-panel[name="soporte_it"] .info-panel {
  background-image: url('./Media/DSC_0105.jpg');
}

/* Estilos para el panel de Big Data - IA */
sl-tab-panel[name="bigdata_ia"] .info-panel {
  background-image: url('./Media/AI-big-data.jpg');
}

/* Estilos para el panel de Desarrollador */
sl-tab-panel[name="desarrolladorExperiencia"] .info-panel {
  background-image: url('./Media/oficinas_central_hiberus.png');
}

/* Estilos para el panel de Soporte IT */
sl-tab-panel[name="soporte_itExperiencia"] .info-panel {
  background-image: url('./Media/oficinas_central_ktuin.png');
}
/* Clase base para los estilos de texto comunes */
.panel-text-base {
    color: white;
    text-shadow: 2px 2px 7px black;
    text-transform: uppercase;
    font-weight: bolder;
    margin: 0;
}

/* Título principal (para "Desarrollador de aplicaciones..." o "GS SMR") */
.panel-title {
    font-size: 5rem;
}

/* Título de menor jerarquía (para la empresa) */
.panel-title_Medio {
    font-size: 3.5rem;
}

/* Subtítulo (para el tipo de contrato, etc.) */
.panel-subtitle {
    font-size: 1.5rem;
    font-weight: bolder;
    text-transform: uppercase;
    color: white;
    text-shadow: 2px 2px 7px black;

    /* Añade una raya debajo */
    border-bottom: 2px solid #ffffff;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem; /* Ajusta el margen para separarlo de la fecha */
}

/* Fecha y otros datos */
.panel-date {
    font-style: italic;
    color: #e0e0e0;
}

.panel-content {
    color: white;
    text-shadow: 2px 2px 2px black;
    text-align: left;
    max-width: 90%;
}

.panel-content span {
    font-weight: bold;
    color: white;
}

/* Estilos para la lista de asignaturas */
.subjects-list {
    list-style-type: none;
    padding: 0;
    margin-top: 10px;
    columns: 2; /* Organiza la lista en dos columnas */
    column-gap: 30px;
}

.subjects-list li {
    margin-right: 5px;
    margin-bottom: 5px;
}

/* Estilo del botón */
.panel-link {
    display: inline-block;
    padding: 0.5rem 2.2rem;
    color: rgb(255, 255, 255);
    background-color: rgba(44, 71, 129, 0.985);
    border: 2px solid white;
    border-radius: 100px;
    text-align: center;
    text-decoration: none;
    transition: 0.3s ease;
}

.panel-link:hover {
    background-color: rgb(0, 120, 185);
    color: rgb(255, 255, 255);
    border: 2px solid rgb(0, 169, 185);
}


/*Tarjetas Cursos*/

.containerCCI{
    align-items: center;
    margin: 0 auto;
    
    margin-top: 50px;
   
}

.cardCCI {
    display: flex;
    flex-wrap: wrap;
    border-radius: 1.5rem;
    background-color: white;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s;
    max-width: clamp(20rem, 80vw, 54.25rem);
    min-width: 21rem;
    min-height: 17.5rem;
    color: black;
    transition-duration: 0.2s;
}

.card_AWS_CCI:hover {
    transition-duration: 0.2s;
    box-shadow:  rgb(255, 106, 0) 
        5px 5px 0px;
}

.card_FCC_CCI:hover {
    transition-duration: 0.2s;
    box-shadow:  rgb(0, 242, 255) 
        5px 5px 0px;
}

.card_UDEMY_CCI:hover {
    transition-duration: 0.2s;
    box-shadow:  rgb(149, 0, 255) 
        5px 5px 0px;
}

.card_CISCO_CCI:hover {
    transition-duration: 0.2s;
    box-shadow:  rgb(0, 169, 20) 
        5px 5px 0px;
}

.card_GC_CCI:hover {
    transition-duration: 0.2s;
    box-shadow:  rgb(255, 251, 0) 
        5px 5px 0px;
}

.card_ORACLE_CCI:hover {
    transition-duration: 0.2s;
    box-shadow:  rgb(255, 0, 0) 
        5px 5px 0px;
}

.containerCCI:last-of-type{
    margin-bottom: 100px;
}

.backgroundCCI {
    flex: 1 1 15rem;
}

.backgroundCCI img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contentCCI {
    flex: 3 1 22rem;
    display: flex;
    flex-direction: column;
    justify-content: start;
    padding: 1rem;
}

.contentCCI > h2 {
    font-size: clamp(
        1.3rem, 2.5vw, 
        1.8rem);
    font-weight: 700;
    margin-bottom: clamp(
        0.35rem, 2vw, 
        0.55rem
    );
}

.contentCCI > p {
    font-size: clamp(1rem, 
        1.75vw, 1.1rem);
    font-weight: 400;
    margin: 0.4rem 0;
}

.contentCCI a {
    color: var(--primary-violetCCI);
}

.chipsCCI {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0.75rem 0px 1rem 0px;
}

.chipCCI {
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.9375rem;
    background-color: var(--grayCCI);
    transition: all 0.3s;
    font-weight: 500;
}
/* Oculta el menú desplegable por defecto para que no se vea en desktop */
.mobile-nav {
    display: none;
}

/* El resto de tus estilos de desktop, si los tienes */
.desktop-nav {
   
}


.chipCCI:hover {
    background-color: var(
        --primary-violetCCI);
    color: var(--grayCCI)
}

.action-buttonsCCI {
    border-top: 1px solid var(
        --grayCCI);
    padding-top: 1rem;
    gap: 0.75rem;
    display: flex;
    margin-top: auto;
    flex-wrap: wrap;
}

.action-buttonsCCI a {
    background-color: var(
        --primaryCCI);
    color: white;
    padding: 0.75rem;
    text-decoration: none;
    border-radius: 0.75rem;
    outline: none;
    border: none;
    font-size: 1.125rem;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    flex: 1 0 15rem;
    max-width: 100%;
}

.action-buttonsCCI a:hover {
    text-decoration: underline;
}

.action-buttonsCCI a.secondaryCCI {
    background-color: inherit;
    color: var(--primaryCCI);
    border: 1px solid var(
        --primaryCCI);
    flex: 1 0 5rem;
}


.separador{
    margin-bottom: 250px;
}


/******************************/
/*     Medias Querys          */
/******************************/
@media (max-width: 1790px) {
    
    .container {

        position: absolute;
        top: 17rem;
        right: 20%;
        width: 18rem;
        height: 18rem;
    } 

        
    .profile {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        overflow: hidden;
        width: 22rem;
        height: 23.5rem;
        border-radius: 25rem;
        box-shadow: 0 5px 18px rgb(0, 0, 0);
        cursor: pointer;
        transition: 0.5s;
        z-index: 6;
        -webkit-border-radius: 25rem;
        -moz-border-radius: 25rem;
        -ms-border-radius: 25rem;
        -o-border-radius: 25rem;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
    }
    .profile-name{
        padding: 4.5rem 3rem;
    }
    .social-icons{
        bottom: 5.5rem; 
    }

    #herramientas {
        display: flex;
        flex-direction: column;
        top: 40%;
        right: -110px;
     }
    
     #icon{
        display: flex;
        flex-direction: column;
        top: 90px;
        right: 142px;
     }
    
}
@media (max-width: 1610px) {
    .home{
        margin-top: 200px;
        width: 100%;
    }


    .global-section-Home{
        width: 100%;
        justify-content: center;

    }

    .home-content{
        width: 100%;
        max-width: 900px;
        margin-right: 10%;
        margin-left: 5%;
        padding-left: 0;
        padding-right: 0;
    }

    .container {
        position: absolute;
        top: 10rem;
        right: 0;
        left: 38%;
    } 
    .formaIzquierda{
    position: fixed;
    display: block;
    left:-200px;
    top: 3%;
   
    backdrop-filter: blur(10px);
    background-color: var(--primary-color-FiguraIzquierda);
   
    border: 5px solid rgb(255, 255, 255);
    clip-path: polygon(40% 2%, 72% 28%, 72% 70%, 40% 94%);
    z-index: 100;
    filter: blur(10px);
    -webkit-filter: blur(10px);
    }

        
    .profile {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        overflow: hidden;
        width: 18rem;
        height: 18.5rem;
        border-radius: 25rem;
        box-shadow: 0 5px 18px rgb(0, 0, 0);
        cursor: pointer;
        transition: 0.5s;
        z-index: 6;
        -webkit-border-radius: 25rem;
        -moz-border-radius: 25rem;
        -ms-border-radius: 25rem;
        -o-border-radius: 25rem;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
    }

    #textH1{
        display: flex;
    
        font-size: 51px;
        font-weight:700;
        color: var(--primary-color-Letras);
        z-index: 5;
        padding-top: 80px;
        
      }
    
    .containerH3 .text{
        
        font-size: 32px;
        font-weight: 700;
        color: #00abf0;
       
       
        top: 270px;
        height: auto;
        width: auto;
    }
    .profile-name{
        padding: 2rem 3rem;
        font-size: 14px;
        margin-bottom: 0;
        text-align: center;
    }

    #nombreProfile{
        font-size: 26px;
    }

    .profile-bio{
        text-align: start;
        position: absolute;
        padding: 0rem 0rem;
        top:110px;
        left: 30px;
        margin: 0;
    }
    .social-icons{
        bottom: 4rem; 
    }

        
    .social-icons li a {
        position: relative;
        display: block;
        display: grid;
        place-items: center;
        background: #ffffff;
        font-size: 13px;
        font-weight: bold;
        width: 1.8rem;
        height: 1.8rem;
        border: 1px solid #CDCDCD;
        border-radius: 0.5rem;
        transition: .2s;
        transform: translateY(2rem);
        opacity: 0;
        text-decoration: none;
        color: rgb(31, 68, 133);
        -webkit-transform: translateY(2rem);
        -moz-transform: translateY(2rem);
        -ms-transform: translateY(2rem);
        -o-transform: translateY(2rem);
    }
    

#tarjeta1{
    margin-left: 100px;
    margin-right: 100px;
}
#tarjeta2{
    margin-left: 100px;
    margin-right: 100px;
}

}

/* 2. Media Query para pantallas entre 1440px y 768px: 2 columnas */
/* Ajusta el valor `1440px` según tu necesidad real */
@media (max-width: 1440px) {
    .articles {
        grid-template-columns: repeat(2, 1fr);
    }
    #contenedorTecnologias{
        margin: 0 auto;
    }
}


@media (max-width: 1300px) {
    .home{
        margin-top: 200px;
        width: 100%;
    }


    .global-section-Home{
        width: 100%;
        justify-content: center;

    }

    .home-content{
        width: 100%;
        max-width: 900px;
        margin-right: 15%;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .container {
        position: absolute;
        top: 10rem;
        right: 0;
        left: 36%;
    } 

        
    .profile {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        overflow: hidden;
        width: 18rem;
        height: 18.5rem;
        border-radius: 25rem;
        box-shadow: 0 5px 18px rgb(0, 0, 0);
        cursor: pointer;
        transition: 0.5s;
        z-index: 6;
        -webkit-border-radius: 25rem;
        -moz-border-radius: 25rem;
        -ms-border-radius: 25rem;
        -o-border-radius: 25rem;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
    }

    
    .profile-name{
        padding: 2rem 3rem;
        font-size: 14px;
        margin-bottom: 0;
        text-align: center;
    }

    #nombreProfile{
        font-size: 26px;
    }

    .profile-bio{
        text-align: start;
        position: absolute;
        padding: 0rem 0rem;
        top:110px;
        left: 30px;
        margin: 0;
    }
    .social-icons{
        bottom: 4rem; 
    }

    
    .social-icons li a {
        position: relative;
        display: block;
        display: grid;
        place-items: center;
        background: #ffffff;
        font-size: 13px;
        font-weight: bold;
        width: 1.8rem;
        height: 1.8rem;
        border: 1px solid #CDCDCD;
        border-radius: 0.5rem;
        transition: .2s;
        transform: translateY(2rem);
        opacity: 0;
        text-decoration: none;
        color: rgb(31, 68, 133);
        -webkit-transform: translateY(2rem);
        -moz-transform: translateY(2rem);
        -ms-transform: translateY(2rem);
        -o-transform: translateY(2rem);
    }

    #contenedorSeccionesCCI{
        display: flex;
        flex-direction: column;
        width: 95%;
        margin: 0 auto;
        height: auto;
        margin-bottom: 100px;
        color: var(--primary-color-Letras);
        
    }
    
    
}



@media (max-width: 1000px) {
    .home{
        margin-top: 250px;
        width: 100%;
    }


    .global-section-Home{
        width: 100%;
        justify-content: center;

    }

    .home-content{
        width: 100%;
        max-width: 900px;
        margin-right: 15%;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }

    #contenedorTecnologias{
        margin: 0 auto;
    }

    .container {
        position: absolute;
        top: 10rem;
        right: 0;
        left: 30%;
    } 

        
    .profile {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        overflow: hidden;
        width: 18rem;
        height: 18.5rem;
        border-radius: 25rem;
        box-shadow: 0 5px 18px rgb(0, 0, 0);
        cursor: pointer;
        transition: 0.5s;
        z-index: 6;
        -webkit-border-radius: 25rem;
        -moz-border-radius: 25rem;
        -ms-border-radius: 25rem;
        -o-border-radius: 25rem;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
    }

    
    .profile-name{
        padding: 2rem 3rem;
        font-size: 14px;
        margin-bottom: 0;
        text-align: center;
    }

    #nombreProfile{
        font-size: 26px;
    }

    .profile-bio{
        text-align: start;
        position: absolute;
        padding: 0rem 0rem;
        top:110px;
        left: 30px;
        margin: 0;
    }
    .social-icons{
        bottom: 4rem; 
    }


        
    .social-icons li a {
        position: relative;
        display: block;
        display: grid;
        place-items: center;
        background: #ffffff;
        font-size: 13px;
        font-weight: bold;
        width: 1.8rem;
        height: 1.8rem;
        border: 1px solid #CDCDCD;
        border-radius: 0.5rem;
        transition: .2s;
        transform: translateY(2rem);
        opacity: 0;
        text-decoration: none;
        color: rgb(31, 68, 133);
        -webkit-transform: translateY(2rem);
        -moz-transform: translateY(2rem);
        -ms-transform: translateY(2rem);
        -o-transform: translateY(2rem);
    }
    

 #herramientas {
    display: flex;
    flex-direction: column;
    top: 40%;
    right: -120px;
 }

 #icon{
    display: flex;
    flex-direction: column;
    top: 90px;
    right: 142px;
 }


    #contenedorSeccionesCCI{
        display: flex;
        flex-direction: column;
        width: 95%;
        margin: 0 auto;
        height: auto;
        margin-bottom: 100px;
        color: var(--primary-color-Letras);
        
    }
    .home-content > p{
        margin-top: 0;
        padding-top: 0;
    }
}

@media (max-width: 830px){
    .backgroundCCI{
        width: 100%;
        height: 80%;
    }
    .backgroundCCI  img{
        height: 250px;
    }
    .home-content{
        margin-left: 10px;
    }

    #contenedorSeccionesCCI{
        display: flex;
        flex-direction: column;
        width: 90%;
        margin: 0 auto;
        height: auto;
        margin-bottom: 100px;
        color: var(--primary-color-Letras);
        
    }
}

@media (max-width: 770px) {
    .header{
        margin-top:100px;
    }
    .home {
        margin-top: 220px;
        width: 100%;
    }

    .global-section-Home {
        width: 100%;
        justify-content: center;
    }
    .panel-subtitle{
        font-size:20px;
    }
    .panel-title_Medio{
        font-size: 35px;
    }

    .home-content {
        width: 100%;
        max-width: 90%;
        margin-right: 15%;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .container {
        position: absolute;
        top: 8rem;
        right: 0;
        left: 28%;
    } 

    #contenedorTecnologias{
        margin: 0 auto;
        width: auto;
    }

    .profile {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        overflow: hidden;
        width: 18rem;
        height: 18.5rem;
        border-radius: 25rem;
        box-shadow: 0 5px 18px rgb(0, 0, 0);
        cursor: pointer;
        transition: 0.5s;
        z-index: 6;
        -webkit-border-radius: 25rem;
        -moz-border-radius: 25rem;
        -ms-border-radius: 25rem;
        -o-border-radius: 25rem;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
    }

    .profile-name {
        padding: 2rem 3rem;
        font-size: 14px;
        margin-bottom: 0;
        text-align: center;
    }

    #nombreProfile {
        font-size: 26px;
    }

    .profile-bio {
        text-align: start;
        position: absolute;
        padding: 0rem 0rem;
        top: 110px;
        left: 30px;
        margin: 0;
    }

    .social-icons {
        bottom: 4rem; 
    }
    .formaIzquierda{
        display: none;
    }

    .social-icons li a {
        position: relative;
        display: block;
        display: grid;
        place-items: center;
        background: #ffffff;
        font-size: 13px;
        font-weight: bold;
        width: 1.8rem;
        height: 1.8rem;
        border: 1px solid #CDCDCD;
        border-radius: 0.5rem;
        transition: .2s;
        transform: translateY(2rem);
        opacity: 0;
        text-decoration: none;
        color: rgb(31, 68, 133);
        -webkit-transform: translateY(2rem);
        -moz-transform: translateY(2rem);
        -ms-transform: translateY(2rem);
        -o-transform: translateY(2rem);
    }

    #herramientas {
        margin-right: -20px;
    }

    .card-front,
    .card-back {
        padding: 1rem;
    }

    #tarjeta1 {
        margin-left: 13%;
        margin-right: 5%;
    }

    #tarjeta2 {
        margin-left: 13%;
        margin-right: 5%;
    }

    #contenedorSeccionesCCI {
        display: flex;
        flex-direction: column;
        width: 95%;
        margin: 0 auto;
        height: auto;
        margin-bottom: 100px;
        color: var(--primary-color-Letras);
    }

    /* Oculta la navegación horizontal en móviles */
    .containerNav {
        display: none;
    }
    
    /* Estilos para el menú desplegable en móviles */
    .mobile-nav {
        display: block; 
        position: fixed; /* Lo fijamos en la pantalla */
        top: 0px; /* ¡Cambiado de bottom a top! */
        left: 0;
        width: 100%;
        padding: 15px;
        background-color: rgb(10, 33, 50);
        color: white;
        font-size:16px;
        font-weight: bolder;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        border-bottom: 1px solid #ffffff; /* Separación sutil del contenido en la parte inferior */
        z-index: 1000;
        box-shadow: 0 2px 5px rgba(79, 79, 79, 0.849); /* Sombra hacia abajo */
        text-align: center;
    }

    

    .mobile-nav select {
        width: 90%;
        padding: 10px;
        border-radius: 5px;
        font-size: 20px;
        border: 1px solid #ccc;
        color:white;
    }

    .mobile-nav select option:checked {
        background-color: #485474; /* Color de fondo */
        color: white; /* Color del texto */
        font-weight: bolder;
    }

    /* Opcionalmente, para un mejor contraste en la lista desplegable */
    .mobile-nav select option:hover {
        background-color: #1f3f98;
        color: white;
    }

    .articles {
        grid-template-columns: repeat(1, 1fr);
    }


        /* Contenedor principal de la galería. Usa Flexbox para centrar y manejar el espaciado. */
    #contenedorRecomendaciones {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        width: 100%;
        height: auto;
        margin-bottom: 200px;
        color: var(--primary-color-Letras);
        z-index: 100;
        padding: 0rem;
        align-items: center;
        text-align: center;
    }

    /* Contenedor de las dos cajas de recomendación */
    .recommendation-grid {
        display: flex;
        gap: 20px; /* Espacio entre las cajas */
        flex-wrap: wrap; /* Permite que las cajas se envuelvan en pantallas pequeñas */
        justify-content: center; /* Centra las cajas horizontalmente */
        width: 100%;
    }

    /* Estilos de cada recuadro de recomendación */
    .recommendation {
        flex: 1; /* Permite que las cajas se expandan y contraigan */
        min-width: 300px; /* Evita que las cajas se vuelvan demasiado pequeñas */
        padding: 1.5rem;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        background-color: var(--background-color-recomendation);
        text-align: left;
        align-content: center;
    }

    .recommendation p {
        text-align: justify; /* Justifica el texto de los párrafos */
    }

    .author {
        margin-top: 1rem;
        font-style: italic;
        color: var(--color-letras-autor);
        text-align: right;
    }
}

/* Media Query para pantallas pequeñas */
@media (max-width: 768px) {
    .recommendation-grid {
        /* Para forzar una sola columna, el flex-direction ya lo hace,
           pero la clave es permitir que cada recomendación ocupe todo el ancho. */
        flex-direction: column;
        align-items: center; /* Centra las cajas apiladas */

    }

    .recommendation {
        width: 95%; /* Ajusta el ancho para que ocupe casi toda la pantalla */
    }
}
   



@media (max-width:700px) and (max-height: 800px){
     .home{
        margin-top: 200px;
        width: 100%;
    }

    .global-section-Home{
        width: 100%;
        justify-content: center;

    }


     .container {
        position: absolute;
        top: 6rem;
        right: 0;
        left: 3%;
    } 

    

    .home-content{
        width: 100%;
        max-width: 900px;
        margin-right: 2%;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }


    .seccionesNav{
    
        width: 85%;
        top: 0px;
        margin-top: 150px;
        display: block;
        text-align: center;
        z-index: 5;
    }

        
    .profile {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        overflow: hidden;
        width: 18rem;
        height: 18.5rem;
        border-radius: 25rem;
        box-shadow: 0 5px 18px rgb(0, 0, 0);
        cursor: pointer;
        transition: 0.5s;
        z-index: 6;
        -webkit-border-radius: 25rem;
        -moz-border-radius: 25rem;
        -ms-border-radius: 25rem;
        -o-border-radius: 25rem;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
    }

    .home-content{
        width: 100%;
        max-width: auto;
        margin-right: 15%;
        padding-right: 0;
        margin-top: 230px;
    }
    .seccionesNav{
    
        width: 83%;
        top: 1300px;
        margin-top: 100px;
        left: 0px;
        display: block;
        text-align: center;
        z-index: 5;
  
    }

}

/*Barra navegación Movil*/
@media (max-width: 650px) and (max-height: 800px) {
    .home{
        margin-top: 250px;
        width: 100%;
    }


    .global-section-Home{
        width: 100%;
        justify-content: center;

    }

    .home-content{
        width: 100%;
        max-width: 900px;
        margin-right: 15%;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .container {
        position: absolute;
        top: 8rem;
        right: 0;
        left: 20%;
    } 

        
    .profile {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        overflow: hidden;
        width: 18rem;
        height: 18.5rem;
        border-radius: 25rem;
        box-shadow: 0 5px 18px rgb(0, 0, 0);
        cursor: pointer;
        transition: 0.5s;
        z-index: 6;
        -webkit-border-radius: 25rem;
        -moz-border-radius: 25rem;
        -ms-border-radius: 25rem;
        -o-border-radius: 25rem;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
    }

    #contenedorSeccionesCCI{
        margin-bottom: 200px;
    }
    
    .profile-name{
        padding: 2rem 3rem;
        font-size: 14px;
        margin-bottom: 0;
        text-align: center;
    }

    #nombreProfile{
        font-size: 26px;
    }

    .profile-bio{
        text-align: start;
        position: absolute;
        padding: 0rem 0rem;
        top:110px;
        left: 30px;
        margin: 0;
    }
    .social-icons{
        bottom: 4rem; 
    }

        
    .social-icons li a {
        position: relative;
        display: block;
        display: grid;
        place-items: center;
        background: #ffffff;
        font-size: 13px;
        font-weight: bold;
        width: 1.8rem;
        height: 1.8rem;
        border: 1px solid #CDCDCD;
        border-radius: 0.5rem;
        transition: .2s;
        transform: translateY(2rem);
        opacity: 0;
        text-decoration: none;
        color: rgb(31, 68, 133);
        -webkit-transform: translateY(2rem);
        -moz-transform: translateY(2rem);
        -ms-transform: translateY(2rem);
        -o-transform: translateY(2rem);
    }
    
    #footer{
        background-color: #000c22;
        
        position: fixed;
        color: var(--primary-color-Letras);
        bottom: 0px;
        left: 0px;
        align-items: center;
        text-align: center;
        z-index: 100000;
    }


    #contenedorSeccionesCCI{
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        height: auto;
        margin-bottom: 100px;
        color: var(--primary-color-Letras);
        
    }

    #textH1{
        display: flex;
    
        font-size: 45px;
        font-weight:700;
        color: var(--primary-color-Letras);
        z-index: 5;
        
      }
      
    
    .containerH3 .text{
        
        font-size: 27px;
        font-weight: 700;
        color: #00abf0;
        top: 0px;
        height: auto;
        width: auto;
    }

    
        /* Contenedor principal de la galería. Usa Flexbox para centrar y manejar el espaciado. */
    #contenedorRecomendaciones {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        width: 100%;
        height: auto;
        margin-bottom: 200px;
        color: var(--primary-color-Letras);
        z-index: 100;
        padding: 0rem;
        align-items: center;
        text-align: center;
    }

    /* Contenedor de las dos cajas de recomendación */
    .recommendation-grid {
        display: flex;
        gap: 20px; /* Espacio entre las cajas */
        flex-wrap: wrap; /* Permite que las cajas se envuelvan en pantallas pequeñas */
        justify-content: center; /* Centra las cajas horizontalmente */
        width: 100%;
    }

    /* Estilos de cada recuadro de recomendación */
    .recommendation {
        flex: 1; /* Permite que las cajas se expandan y contraigan */
        min-width: 350px; /* Evita que las cajas se vuelvan demasiado pequeñas */
        padding: 1.0rem;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        background-color: var(--background-color-recomendation);
        text-align: left;
        align-content: center;

    }

    .recommendation p {
        text-align: justify; /* Justifica el texto de los párrafos */
    }

    .author {
        margin-top: 1rem;
        font-style: italic;
        color: var(--color-letras-autor);
        text-align: right;
    }

}
@media (max-width: 600px) {
    .home{
        margin-top: 250px;
        width: 100%;
    }


    .global-section-Home{
        width: 100%;
        justify-content: center;

    }

    .home-content{
        width: 100%;
        
        margin-right: 15%;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .home-content h1 {
        font-size: 40px;
    }

    .home-content h3 {
        font-size: 25px;
    }

    .home-content p {
        font-size: 16px;
    }

    .container {
        position: absolute;
        top: 9rem;
        right: 0;
        left: 20%;
    } 

        
    .profile {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        overflow: hidden;
        width: 16rem;
        height: 16.5rem;
        border-radius: 25rem;
        box-shadow: 0 5px 18px rgb(0, 0, 0);
        cursor: pointer;
        transition: 0.5s;
        z-index: 6;
        -webkit-border-radius: 25rem;
        -moz-border-radius: 25rem;
        -ms-border-radius: 25rem;
        -o-border-radius: 25rem;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
    }

    
    .profile-name{
        padding: 0.8rem 2rem;
        font-size: 14px;
        margin-bottom: 0;
        text-align: center;
    }

    #nombreProfile{
        font-size: 26px;
    }

    .profile-bio{
        text-align: center;
        position: absolute;
        padding: 0rem 0rem;
        top:90px;
        left: -5px;
        margin: 0 auto;
    }
    .social-icons{
        bottom: 3.6rem; 
    }

    
.social-icons li a {
    position: relative;
    display: block;
    display: grid;
    place-items: center;
    background: #ffffff;
    font-size: 13px;
    font-weight: bold;
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid #CDCDCD;
    border-radius: 0.5rem;
    transition: .2s;
    transform: translateY(2rem);
    opacity: 0;
    text-decoration: none;
    color: rgb(31, 68, 133);
    -webkit-transform: translateY(2rem);
    -moz-transform: translateY(2rem);
    -ms-transform: translateY(2rem);
    -o-transform: translateY(2rem);
}

.title {
    font-family: "Teko", sans-serif;
    font-size: 3rem;
    text-transform: uppercase;
    line-height: 140%;
    transform: translateZ(2.0rem);
    -webkit-transform: translateZ(2.0rem);
    -moz-transform: translateZ(2.0rem);
    -ms-transform: translateZ(2.0rem);
    -o-transform: translateZ(2.0rem);
}

  .tituloBackDAM{
    text-align: center;
    font-size: 0.8rem;
    text-shadow: 3px  0px 0px rgb(255, 0, 0),
    0px  3px 0px rgb(255, 0, 0),
   -3px  0px 0px rgb(255, 0, 0),
    0px -3px 0px rgb(255, 0, 0);
  }

  .sub-title {
    font-size: 0.8rem;
    font-weight: bolder;
    text-transform: uppercase;
    letter-spacing: 3px;
    transform: translateZ(3rem);
  }
  .movie-description{
    text-align: start;
  }


   .titulos{
        font-size: 32px;
    }

  .back-title{
    font-family: "Teko", sans-serif;
    font-size: 3rem;
    font-weight: bolder;
    text-transform: uppercase;
    align-self: center;
    text-align:center;
    transform: translateZ(2rem);
  }

  #asignaturasSH {
    margin-left: 30px;
    color: rgb(255, 255, 255);
    text-shadow: 2px 2px 2px rgb(21, 21, 21);
    text-align: start;
    font-size: 13px;
  }


#contenedorSeccionesCCI{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    margin-right: 15%;
    height: auto;
    margin-bottom: 100px;
    color: var(--primary-color-Letras);
    
}  

#textH1{
    display: flex;

    font-size: 40px;
    font-weight:700;
    color: var(--primary-color-Letras);
    z-index: 5;
    
  }

.containerH3 .text{
    
    font-size: 24px;
    font-weight: 700;
    color: #00abf0;
   
   
    top: 270px;
    height: auto;
    width: auto;
}
    
}

@media (max-width: 520px) {
    .home{
        margin-top: 250px;
        width: 470px;
        margin-left: -20px;
        padding: 0px;
    }


    .global-section-Home{
        width: 100%;
        justify-content: center;
        padding-left: 30px;
        padding-right:10px;

    }

    .home-content{
        width: 90%;
        max-width: auto;
        margin-top: 50px;
        
    }

    .home-content h1 {
        font-size: 40px;
    }

    .containerTextH1{
        font-size: 40px;
    }

    .containerH3{
         font-size: 25px;
    }

    .home-content h3 {
        font-size: 25px;
    }

    .home-content p {
        font-size: 17px;
    }

    #herramientas{
        margin-right: -10px;
    }
    .container {
        position: absolute;
        margin-top: 0px;
        top: 8rem;
        right: 0;
        left: 20%;
    } 
        
    .profile {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        overflow: hidden;
        width: 16rem;
        height: 16.5rem;
        border-radius: 25rem;
        box-shadow: 0 5px 18px rgb(0, 0, 0);
        cursor: pointer;
        transition: 0.5s;
        z-index: 6;
        -webkit-border-radius: 25rem;
        -moz-border-radius: 25rem;
        -ms-border-radius: 25rem;
        -o-border-radius: 25rem;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
    }


    
    .profile-name{
        padding: 0.8rem 2rem;
        font-size: 14px;
        margin-bottom: 0;
        text-align: center;
    }

    #nombreProfile{
        font-size: 26px;
    }

    .profile-bio{
        text-align: center;
        position: absolute;
        padding: 0rem 0rem;
        top:90px;
        left: -5px;
        margin: 0 auto;
    }
    .social-icons{
        bottom: 3.6rem; 
    }
    

        
    .social-icons li a {
        position: relative;
        display: block;
        display: grid;
        place-items: center;
        background: #ffffff;
        font-size: 13px;
        font-weight: bold;
        width: 1.8rem;
        height: 1.8rem;
        border: 1px solid #CDCDCD;
        border-radius: 0.5rem;
        transition: .2s;
        transform: translateY(2rem);
        opacity: 0;
        text-decoration: none;
        color: rgb(31, 68, 133);
        -webkit-transform: translateY(2rem);
        -moz-transform: translateY(2rem);
        -ms-transform: translateY(2rem);
        -o-transform: translateY(2rem);
    }
     .seccionesNav{
    
        width: 83%;
        top: 0px;
        margin-top: 100px;
        left: 0px;
        display: block;
        text-align: center;
        
    }
    
    #asignaturasSH {
        margin-left: 20px;
        color: rgb(255, 255, 255);
        text-shadow: 2px 2px 2px rgb(21, 21, 21);
        text-align: start;
        font-size: 13px;
    }


    .cardCCI{
        width: 95%;
        max-width: clamp(20rem, 80vw, 54.25rem);
        min-width: 10rem;
        min-height: 17.5rem;
    }
    #contenedorSeccionesCCI{
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        margin-right: 15%;
        height: auto;
        margin-bottom: 100px;
        color: var(--primary-color-Letras);
        
    }

    #textH1{
        display: flex;

        font-size: 35px;
        font-weight:700;
        color: var(--primary-color-Letras);
        z-index: 5;
        
    }

    .containerH3 .text{
        
        font-size: 20px;
        font-weight: 700;
        color: #00abf0;
    
    
        top: 270px;
        height: auto;
        width: auto;
    }

         /* Contenedor principal de la galería. Usa Flexbox para centrar y manejar el espaciado. */
    #contenedorRecomendaciones {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        width: 100%;
        height: auto;
        margin-bottom: 200px;
        color: var(--primary-color-Letras);
        z-index: 100;
        padding: 0rem;
        align-items: center;
        text-align: center;
    }

    /* Contenedor de las dos cajas de recomendación */
    .recommendation-grid {
        display: flex;
        gap: 20px; /* Espacio entre las cajas */
        flex-wrap: wrap; /* Permite que las cajas se envuelvan en pantallas pequeñas */
        justify-content: center; /* Centra las cajas horizontalmente */
        width: 100%;
    }

    /* Estilos de cada recuadro de recomendación */
    .recommendation {
        flex: 1; /* Permite que las cajas se expandan y contraigan */
        min-width: 230px; /* Evita que las cajas se vuelvan demasiado pequeñas */
        padding: 1.0rem;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        background-color: var(--background-color-recomendation);
        text-align: left;
        align-content: center;
        
    }

    .recommendation p {
        text-align: justify; /* Justifica el texto de los párrafos */
    }

    .author {
        margin-top: 1rem;
        font-style: italic;
        color: var(--color-letras-autor);
        text-align: right;
    }

}

@media (max-width: 500px) {
    .home{
        margin-top: 250px;
        width: 100%;
        margin-left: -20px;
        margin-right: 0px;
        padding: 0px;
    }


    .global-section-Home{
        width: 100%;
        justify-content: center;
        padding-left: 30px;
        padding-right:10px;

    }

     .panel-subtitle{
        font-size:17px;
    }
    .panel-title_Medio{
        font-size: 25px;
    }

    .panel-content{
        font-size:13px;
    }

    .home-content{
        width: 100%;
        max-width: auto;
        margin-top: 50px;
        
    }

    .home-content h1 {
        font-size: 40px;
    }

    .containerTextH1{
        font-size: 40px;
    }
    
    #contenedorTecnologias{
        margin: 0 auto;
        padding-left: 0px;
        padding-right: 0px;
    
        width: auto;
    }
    .skills-grid{
        margin: 0 auto;
        padding-left: 0px;
        padding-right: 0px;
     
    }
    
    .containerH3{
         font-size: 25px;
    }

    .home-content h3 {
        font-size: 25px;
    }

    .home-content p {
        font-size: 17px;
    }

    #herramientas{
        margin-right: -10px;
    }
    .container {
        position: absolute;
        margin-top: 0px;
        top: 8rem;
        right: 0;
        left: 20%;
    } 
        
    .profile {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        overflow: hidden;
        width: 16rem;
        height: 16.5rem;
        border-radius: 25rem;
        box-shadow: 0 5px 18px rgb(0, 0, 0);
        cursor: pointer;
        transition: 0.5s;
        z-index: 6;
        -webkit-border-radius: 25rem;
        -moz-border-radius: 25rem;
        -ms-border-radius: 25rem;
        -o-border-radius: 25rem;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
    }


    
    .profile-name{
        padding: 0.8rem 2rem;
        font-size: 14px;
        margin-bottom: 0;
        text-align: center;
    }

    #nombreProfile{
        font-size: 26px;
    }

    .profile-bio{
        text-align: center;
        position: absolute;
        padding: 0rem 0rem;
        top:90px;
        left: -5px;
        margin: 0 auto;
    }
    .social-icons{
        bottom: 3.6rem; 
    }
    

        
    .social-icons li a {
        position: relative;
        display: block;
        display: grid;
        place-items: center;
        background: #ffffff;
        font-size: 13px;
        font-weight: bold;
        width: 1.8rem;
        height: 1.8rem;
        border: 1px solid #CDCDCD;
        border-radius: 0.5rem;
        transition: .2s;
        transform: translateY(2rem);
        opacity: 0;
        text-decoration: none;
        color: rgb(31, 68, 133);
        -webkit-transform: translateY(2rem);
        -moz-transform: translateY(2rem);
        -ms-transform: translateY(2rem);
        -o-transform: translateY(2rem);
    }
     .seccionesNav{
    
        width: 80%;
        top: 0px;
        margin-top: 100px;
        left: -10px;
        margin-right: 10%;
        display: block;
        text-align: center;
       
    }
    
    .cardCCI{
        width: 95%;
        max-width: clamp(20rem, 80vw, 54.25rem);
        min-width: 10rem;
        min-height: 17.5rem;
    }
    #contenedorSeccionesCCI{
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        margin-right: 15%;
        height: auto;
        margin-bottom: 100px;
        color: var(--primary-color-Letras);
        
    }

    #textH1{
        display: flex;

        font-size: 35px;
        font-weight:700;
        color: var(--primary-color-Letras);
        z-index: 5;
        
    }

    .containerH3 .text{
        
        font-size: 20px;
        font-weight: 700;
        color: #00abf0;
    
    
        top: 270px;
        height: auto;
        width: auto;
    }

   

}


@media (max-width: 430px){
    
    .profile {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        overflow: hidden;
       
        border-radius: 25rem;
        box-shadow: 0 5px 18px rgb(0, 0, 0);
        cursor: pointer;
        transition: 0.5s;
        z-index: 6;
        -webkit-border-radius: 25rem;
        -moz-border-radius: 25rem;
        -ms-border-radius: 25rem;
        -o-border-radius: 25rem;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
    }

    .profile-wrapper{
        width: 100%;
    }

    .container {
        position: absolute;
        top: 8rem;
        right: 0;
        left: 20%;
    } 
    .home-content{
        margin-top: 80px;
    }

    .home-content h1{
        font-size: 30px;
    }

    .home-content h3{
        font-size: 20px;
    }



    
    .cardCCI{
        width: 95%;
        max-width: clamp(20rem, 80vw, 54.25rem);
        min-width: 10rem;
        min-height: 17.5rem;
    }

    .cardCCI a{
        width: 50%;
    }
        
   
    #textH1{
        display: flex;

        font-size: 30px;
        font-weight:700;
        color: var(--primary-color-Letras);
        z-index: 5;
        
    }

    .containerH3 .text{
        
        font-size: 20px;
        font-weight: 700;
        color: #00abf0;
    
    
        top: 270px;
        height: auto;
        width: auto;
    }

    #seccionAcademica{
        margin-top: 100px;
        margin-bottom: 80px;
    }

    #Tecnologias{
        margin: 0 auto;
        text-align: center;
        align-items:center;
        margin-left: 50px;
        margin-bottom: 30px;
   }
   .titulos{
    font-size: 25px;
     margin-right:20px;
   }
    
    #contenedorTecnologias{
        margin: 0 auto;
        padding-left: 0px;
        padding-right: 0px;
        margin-right: 50px;
        margin-left: -20px;
    }
    .skills-grid{
        margin: 0 auto;
        padding-left: 0px;
        padding-right: 0px;

        display: grid;
      
        gap: 1.5rem;
    }

    .skill-category{
        margin:0 auto;
        width: 90%;
    }

    .skill-category > h3{
        font-size: 17px;
    }

    

   
    #contenedorRecomendaciones {
        display: flex;
        flex-direction: column;
        /* Elimina las propiedades redundantes de margin */
        margin: 0 auto; 
        width: 100%;
        height: auto;
        margin-bottom: 200px;
        color: var(--primary-color-Letras);
        z-index: 100;
        padding: 0.5rem;
        /* Alinea el contenido del contenedor principal al centro */
        align-items: center; 
        text-align: center;
    }

    /* Contenedor de las dos cajas de recomendación */
    .recommendation-grid {
        display: flex;
        gap: 20px; /* Espacio entre las cajas */
        flex-wrap: wrap; /* Permite que las cajas se envuelvan en pantallas pequeñas */
        justify-content: center; /* Centra las cajas horizontalmente */
        width: 100%;
    }

    .recommendation {
        flex: 1; /* Permite que las cajas se expandan y contraigan */
        padding: 1.5rem;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        background-color: var(--background-color-recomendation); /* Añade un color de fondo para que se vean como cajas separadas */
        /* Alinea el texto a la izquierda, no al centro */
        text-align: left; 
        align-content: center;
    }

    .recommendation p {
        text-align: justify; /* Justifica el texto de los párrafos */
    }

    .author {
        margin-top: 1rem;
        font-style: italic;
        color: var(--color-letras-autor); /* Un color más suave para el autor */
        text-align: right; /* Alinea el nombre y puesto a la derecha */
    }
   

      

    #footer{
        background-color: #000c22;
        
        position: fixed;
        color: var(--primary-color-Letras);
        bottom: 0px;
        left: 0px;
        align-items: center;
        text-align: center;
        z-index: 100000;
    }

}



@media (max-width: 400px) and (max-height: 700px) {

    body{
        margin-left: 20%;
    }

    .home{
        margin-top: 380px;
        width: 100%;
        
    }

    .global-section-Home{
        width: 100%;
        justify-content: center;

    }


     .container {
        position: absolute;
        top: 6rem;
        right: 0;
        left: 3%;
    } 

    

    .home-content{
        width: 100%;
        max-width: 900px;
        margin-right: 2%;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }


    .seccionesNav{
    
        width: 85%;
        top: 1500px;
        margin-top: 150px;
        display: block;
        text-align: center;
        z-index: 5;
    }

        
    .profile {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        overflow: hidden;
        width: 18rem;
        height: 18.5rem;
        border-radius: 25rem;
        box-shadow: 0 5px 18px rgb(0, 0, 0);
        cursor: pointer;
        transition: 0.5s;
        z-index: 6;
        -webkit-border-radius: 25rem;
        -moz-border-radius: 25rem;
        -ms-border-radius: 25rem;
        -o-border-radius: 25rem;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
    }

    
    .profile-name{
        padding: 2rem 3rem;
        font-size: 14px;
        margin-bottom: 0;
        text-align: center;
    }

    #nombreProfile{
        font-size: 26px;
    }

    .profile-bio{
        text-align: start;
        position: absolute;
        padding: 0rem 0rem;
        top:110px;
        left: 30px;
        margin: 0;
    }
    .social-icons{
        bottom: 4rem; 
    }

        
    .social-icons li a {
        position: relative;
        display: block;
        display: grid;
        place-items: center;
        background: #ffffff;
        font-size: 13px;
        font-weight: bold;
        width: 1.8rem;
        height: 1.8rem;
        border: 1px solid #CDCDCD;
        border-radius: 0.5rem;
        transition: .2s;
        transform: translateY(2rem);
        opacity: 0;
        text-decoration: none;
        color: rgb(31, 68, 133);
        -webkit-transform: translateY(2rem);
        -moz-transform: translateY(2rem);
        -ms-transform: translateY(2rem);
        -o-transform: translateY(2rem);
    }
        

    #footer{
        background-color: #000c22;
        
        position: fixed;
        color: white;
        bottom: 0px;
        left: 0px;
        align-items: center;
        text-align: center;
        z-index: 100000;
    }

    
    #herramientas{
        margin-right: 0px;
        right: -140px;
        top: 70px;
        height: auto;
    }

    #herramientas > a > svg{
        width: 30px;
        margin-bottom: 20px;
    }

    #herramientas > #icon{
        width: 50px;
        margin-right: 5px;
        top: 70px;
    }

    #contenedorSeccionesCCI{
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        height: auto;
        margin-bottom: 100px;
        color: var(--primary-color-Letras);
        
    }

    #textH1{
        display: flex;
        font-size: 33px;
        font-weight:700;
        color: var(--primary-color-Letras);
        z-index: 5;
        
      }
      
    
    .containerH3 .text{
        
        font-size: 27px;
        font-weight: 700;
        color: #00abf0;
        top: 0px;
        height: auto;
        width: auto;
    }

}

@media(max-width: 380px){
    
    #contenedorTecnologias{
        margin: 0 auto;
        padding-left: 0px;
        padding-right: 0px;
        margin-right: 40px;
        margin-left: -30px;
    }
    .skills-grid{
        margin: 0 auto;
        padding-left: 0px;
        padding-right: 0px;

        display: grid;
      
        gap: 1.5rem;
    }

    .skill-category{
        margin:0 auto;
        width: 80%;
    }

    .skill-category > h3{
        font-size: 17px;
    }

}

@media (max-width: 350px){
    .container {
        position: absolute;
        top: 7rem;
        right: 0;
        left: 3%;
    } 

    .home-content{
        width: 100%;
        max-width: auto;
        margin-right: 15%;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
        margin-top: 100px;
    }

    #textH1{
        display: flex;
    
        font-size: 30px;
        font-weight:700;
        color: var(--primary-color-Letras);
        z-index: 5;
        
      }
    
    .containerH3 .text{
        
        font-size: 20px;
        font-weight: 700;
        color: #00abf0;
       
       
        top: 270px;
        height: auto;
        width: auto;
    }

    #seccionAcademica{
    margin-top: 80px;
    margin-bottom: 80px;
    }

    #contenedorTecnologias{
        margin: 0 auto;
        padding-left: 0px;
        padding-right: 0px;
        margin-right: 50px;
        margin-left: -30px;
    }
    .skills-grid{
        margin: 0 auto;
        padding-left: 0px;
        padding-right: 0px;

        display: grid;
      
        gap: 1.5rem;
    }

    .skill-category{
        margin:0 auto;
        width: 75%;
    }

    .skill-category > h3{
        font-size: 17px;
    }


}

@media (max-height: 830px){
     .home{
        margin-top: 50%;
        width: 100%;
    }

    .global-section-Home{
        width: 100%;
        justify-content: center;

    }


     .container {
        position: absolute;
        top: 6rem;
        right: 0;
        left: 3%;
    } 

    

    .home-content{
        width: 100%;
        max-width: 900px;
        margin-right: 2%;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }


    .seccionesNav{
    
        width: 85%;
        top: 1500px;
        margin-top: 150px;
        display: block;
        text-align: center;
        z-index: 5;
    }

        
    .profile {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        overflow: hidden;
        width: 18rem;
        height: 18.5rem;
        border-radius: 25rem;
        box-shadow: 0 5px 18px rgb(0, 0, 0);
        cursor: pointer;
        transition: 0.5s;
        z-index: 6;
        -webkit-border-radius: 25rem;
        -moz-border-radius: 25rem;
        -ms-border-radius: 25rem;
        -o-border-radius: 25rem;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
    }

}


@media (max-height: 750px){
    body{
        margin-left: 40px;
    }

    .header{
        margin-left: 0px;
        padding-left: 0px;
    }
    #logo{
      width:  80px;
      
    }
     .home{
        margin-top: 230px;
        width: 100%;

    }

    #a_portafolio{
        font-size: 30px;
    }

    .global-section-Home{
        width: 100%;
        justify-content: center;

    }

    .home-content{
        width: 100%;
        max-width: 900px;
        margin-right: 2%;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
        margin-top: 430px;
    }


    .seccionesNav{
    
        width: 80%;
        top: 330px;
        margin-top: 150px;
        display: block;
        text-align: center;
        z-index: 5;
    }
        
    .profile {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        overflow: hidden;
        width: 18rem;
        height: 18.5rem;
        border-radius: 25rem;
        box-shadow: 0 5px 18px rgb(0, 0, 0);
        cursor: pointer;
        transition: 0.5s;
        z-index: 6;
        -webkit-border-radius: 25rem;
        -moz-border-radius: 25rem;
        -ms-border-radius: 25rem;
        -o-border-radius: 25rem;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
        left: -10px;
        
    }
    #nombreProfile{

        font-size: 26px;
        margin-bottom: 0px;
    }

    .profile-bio{
        font-size:14px;
    }

    
    .container {
        position: absolute;
        top: 7rem;
        right: 0;
    }
    .titulos{

        margin-top:80px;
        margin-bottom: 30px;
    }

    #proyectos{
        margin-top: 80px;
    }

    #contenedorArticulos{
        padding-bottom:20px;
    }

    #Academico{
        margin-bottom:0px;
    }

    #contenedorSeccionesCCI{
        margin-bottom: 0px;
    }

    #Tecnologias{
        margin-top: 0px;
    }

}

@media (max-height: 700px){
    
    .home-content{
        width: 100%;
        max-width: 900px;
        margin-right: 15%;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }
    
    .container {
        position: absolute;
        top: 7rem;
        right: 0;
    }

}

@media (max-height: 670px){
    
    .home-content{
        width: 100%;
        max-width: 900px;
        margin-right: 15%;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }
    
    .container {
        position: absolute;
        top: 7rem;
        right: 0;
    }

}


@media (max-height: 630px){
    
       
    .home-content{
        width: 100%;
        max-width: 900px;
        margin-right: 15%;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }
    
    .container {
        position: absolute;
        top: 7rem;
        right: 0;
    }

}

@media (max-height: 600px){
    
    .home-content{
        width: 100%;
        max-width: 900px;
        margin-right: 15%;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }
    
    .container {
        position: absolute;
        top: 7rem;
        right: 0;
    }

}

@media (max-height: 570px){
    
    .home-content{
        width: 100%;
        max-width: 900px;
        margin-right: 15%;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }
    
  
    
    .container {
        position: absolute;
        top: 6rem;
        right: 0;
    }

}

@media (max-height: 500px){
    
    
    .home-content{
        width: 100%;
        max-width: 900px;
        margin-right: 15%;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }
    
    .container {
        position: absolute;
        top: 7rem;
        right: 0;
    }
    
    .container {
        position: absolute;
        top: 6rem;
        right: 0;
    }
}

/*Medias Querys menu forma izquierda*/