/* Con el asterisco aplico estilos a toda la web */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body,
  html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    font-family: "Fira Code", monospace; /* Aplica Fira Code a todo el cuerpo */
  }
  
  h1,
  h2,
  h3,
  p {
    font-family: "Fira Code", monospace; /* Aplica Fira Code a elementos específicos */
  }
  
  /* Estilos para el header */
  header {
    background-color: rgba(0, 0, 0, 0); /* Fondo completamente transparente */
    padding: 5px;
    color: #fff;
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    transition: transform 0.3s ease; /* Transición para suavizar el ocultamiento/mostrado */
  }
  
  nav {
    text-align: left; /* Alinea el contenido del nav a la izquierda */
  }
  
  nav ul {
    list-style: none;
    display: flex; /* Alinea los elementos de la lista en una línea */
  }
  
  nav ul li {
    margin-right: 20px; /* Espacio entre los enlaces */
  }
  
  nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
  }
  
  .principal {
    position: relative;
    height: 100vh; /* La sección ocupe toda la altura de la pantalla */
    overflow: hidden; /* Evitamos el desbordamiento del contenido */
    color: #fff;
    text-align: center;
  }
  
  #bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Aseguramos que el video cubra todo el fondo */
    filter: brightness(
      0.5
    ); /* Oscurece el video para mejorar la legibilidad del texto */
    pointer-events: none; /* Evitamos que el video interfiera con los clics */
  }
  
  .principal-contenido {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(
      -50%,
      -50%
    ); /* Centra el contenido vertical y horizontalmente */
    text-align: center;
    color: #fff;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0); /* Fondo completamente transparente */
    border-radius: 10px; /* Agrega bordes redondeados para el contenedor */
  }
  
  .cta-button {
    display: inline-block;
    padding: 15px 30px;
    background-color: #f0b700;
    color: #333;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.2em;
    margin: 10px; /* Espacio alrededor del botón */
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Añade transición suave para el zoom y el cambio de color */
  }
  
  .cta-button:hover {
    background-color: #0096c7;
    transform: scale(1.05); /* Aplica el efecto de zoom */
  }
  
  #sobre-mi {
    padding: 100px; /* Aumenta el padding superior e inferior */
    height: 500px; /* Ajusta la altura total de la sección- Modificado antes estaba height */
    background-image: url("sobre-mi/yo.jpg"); /* Agrega la imagen de fondo */
    background-size: cover; /* La imagen cubrirá toda la sección */
    background-position: center 25%; /* Bajamos un poco la imagen, a mayor porcentaje, más abajo estará */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    position: relative; /* Permite usar un overlay */
    color: #f9f9f9; /* Color del texto claro */
    text-align: left;
  }
  
  #sobre-mi::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.272); /* Degradado oscuro sobre la imagen */
    z-index: 1; /* Capa por encima de la imagen */
  }
  
  #sobre-mi h2,
  #sobre-mi p,
  #sobre-mi .cta-button {
    position: relative;
    z-index: 2; /* Asegura que el texto esté por encima del overlay */
  }
  
  #sobre-mi h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
  }
  
  #sobre-mi p {
    font-size: 1.2em;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  
  
  /* Estilos generales de la sección */
  #conocimientos {
    position: relative;
    padding: 50px 20px; /* Padding ajustado para la sección */
    background: linear-gradient(
      135deg,
      #4a4a4a,
      #222
    ); /* Fondo degradado para la sección */
    color: #fff; /* Color del texto blanco para contraste */
  }
  
  /* Overlay para mejorar la legibilidad del texto */
  #conocimientos::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Overlay más oscuro */
    z-index: 1;
  }
  
  /* Estilos del título */
  #conocimientos h2 {
    position: relative;
    z-index: 2;
    font-size: 2.5em; /* Aumenta el tamaño del título */
    margin-bottom: 30px; /* Espacio inferior aumentado */
    text-align: center; /* Centra el texto horizontalmente */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); /* Sombra para mejorar la legibilidad */
  }
  
  /* Contenedor de conocimientos */
  #conocimientos .services-list {
    position: relative;
    z-index: 2;
    display: grid; /* Usar grid para un mejor diseño */
    grid-template-columns: repeat(
      auto-fill,
      minmax(300px, 1fr)
    ); /* Columnas con ancho mínimo */
    gap: 30px; /* Espacio entre las cartas */
    justify-items: center; /* Centra las cartas */
    padding: 20px; /* Espacio interno para el contenedor */
  }
  
  /* Estilos de las cartas de servicio */
  #conocimientos .service-item {
    background-color: rgba(62, 62, 59, 0.9); /* Fondo oscuro semitransparente */
    color: #fff; /* Color del texto blanco para contraste */
    padding: 20px; /* Espacio interno de las cartas */
    border-radius: 15px; /* Bordes redondeados más pronunciados */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
    text-align: center; /* Alinea el texto al centro */
    transition: transform 0.3s ease, box-shadow 0.3s ease,
      background-color 0.3s ease, filter 0.3s ease; /* Transiciones suaves */
    width: 100%; /* Asegura que las cartas ocupen todo el ancho */
    max-width: 350px; /* Ajusta el tamaño máximo de las cartas */
    opacity: 0; /* Inicialmente invisibles */
    transform: translateY(20px); /* Desplazadas hacia abajo */
  }
  
  /* Efecto de zoom al pasar el cursor */
  #conocimientos .service-item:hover {
    transform: translateY(-10px) scale(1.05); /* Efecto de desplazamiento y aumento al pasar el cursor */
    box-shadow: 0 16px 24px rgba(0, 0, 0, 0.4); /* Aumenta la sombra al pasar el cursor */
    background-color: rgba(
      80,
      80,
      80,
      0.9
    ); /* Cambia el color de fondo al pasar el cursor */
    filter: brightness(1.1); /* Aumenta el brillo al pasar el cursor */
  }
  
  /* Estilos para el título de cada carta */
  #conocimientos .service-item h3 {
    margin-top: 10px; /* Espacio superior para el título */
    margin-bottom: 10px; /* Espacio inferior para el título */
    font-size: 1.5em; /* Tamaño de fuente para el título */
  }
  
  /* Estilos para la descripción en cada carta */
  #conocimientos .service-item p {
    font-size: 1em; /* Tamaño de fuente para la descripción */
    line-height: 1.6; /* Espacio entre líneas para mejorar la legibilidad */
  }
  
  /* Animación de entrada para las cartas */
  #conocimientos .service-item.visible {
    opacity: 1; /* Se vuelve visible */
    transform: translateY(0); /* Vuelve a la posición original */
  }
  
  /* Estilos para íconos */
  #conocimientos .service-icon {
    max-width: 80px; /* Tamaño fijo para los íconos de servicio */
    margin-bottom: 15px; /* Espacio entre el ícono y el texto */
    filter: drop-shadow(
      0 0 5px rgba(255, 255, 255, 0.5)
    ); /* Efecto de sombra en los íconos */
  }
  
  #seccion-galeria {
    position: relative;
    padding: 30px;
    background-color: #191919; /* Fondo oscuro */
    overflow: hidden; /* Para ocultar el desbordamiento */
  }
  
  .image-gallery {
    display: flex; /* Usar flexbox para alinear las imágenes */
    animation: scroll 80s linear infinite; /* Animación de desplazamiento más lenta */
  }
  
  @keyframes scroll {
    0% {
      transform: translateX(0); /* Comienza en la posición original */
    }
    100% {
      transform: translateX(
        -100%
      ); /* Desplazamiento completo hacia la izquierda */
    }
  }
  
  .image-gallery a {
    margin: 0 10px; /* Espacio entre imágenes */
  }
  
  .image-gallery img {
    width: 100px; /* Ajusta el tamaño según sea necesario */
    height: auto; /* Mantiene la proporción original */
    transition: transform 0.3s; /* Suave efecto al pasar el cursor */
  }
  
  /* Efecto de zoom al pasar el cursor */
  .image-gallery a:hover img {
    transform: scale(1.1); /* Aumenta un poco el tamaño al pasar el cursor */
  }
  
  .visible-images {
    display: flex;
    animation: slide 60s linear infinite; /* Podemos ajustar la duración para controlar la velocidad */
  }
  
  @keyframes slide {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(
        -25%
      ); /* Desplaza a la izquierda la mitad del ancho total */
    }
  }
  
  .visible-images img {
    width: 2%; /* Ajusta el tamaño de las imágenes */
    flex-shrink: 0; /* Evita que las imágenes se reduzcan */
  }
  
  .ctfs {
    padding: 50px;
    background-color: #121212; /* Fondo oscuro */
    color: #f9f9f9; /* Texto claro */
    text-align: center;
  }
  
  .ctfs h2 {
    font-size: 2em;
    margin-bottom: 20px;
  }
  
  .ctf-grid {
    display: grid;
    grid-template-columns: repeat(
      auto-fit,
      minmax(250px, 1fr)
    ); /* Diseño flexible para múltiples columnas */
    gap: 20px; /* Espaciado entre elementos */
  }
  
  .ctf {
    background-color: #1e1e1e; /* Fondo de las tarjetas */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .ctf:hover {
    transform: scale(1.05); /* Efecto de aumento al pasar el cursor */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  }
  
  .ctf img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  .ctf-title {
    font-size: 1.2em;
    margin: 10px;
    text-align: center;
  }
  /* Estilo para la sección de certificados */
  
  #certificados {
    background: #121212; /* Fondo oscuro profesional */
    color: #f0f0f0; /* Texto claro para contraste */
    padding: 60px 20px;
    text-align: center;
    border-radius: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  }
  
  /* Estilo del título */
  #certificados h2 {
    font-size: 2rem;
    margin-bottom: 30px;
    color: #ff9800; /* Naranja vibrante para destacar */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
  }
  
  /* Diseño de la cuadrícula de certificados */
  .certificados-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }
  
  /* Estilo de cada certificado */
  .certificado-item {
    background: #1e1e1e; /* Fondo gris oscuro para separar del fondo negro */
    border: 1px solid #333;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
  }
  
  /* Efecto hover */
  .certificado-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(255, 255, 255, 0.2);
  }
  
  /* Títulos de los certificados */
  .certificado-item h3 {
    color: #ff9800;
    margin-bottom: 10px;
    font-size: 1.4rem;
  }
  
  /* Descripción del certificado */
  .certificado-item p {
    color: #d0d0d0;
    font-size: 1rem;
    line-height: 1.5;
  }
    
  .certificados-ocultos {
    display: contents; /* Hace que los elementos hijos sigan la cuadrícula */
  }
  
  .certificados-ocultos.oculto {
    display: none; /* Mantiene ocultos los certificados hasta que se muestren */
  }
  
  /* Estilos para el botón de descarga */
  .btn-descargar {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 15px;
    font-size: 1rem;
    font-weight: bold;
    color: #121212;
    background: #ff9800; /* Naranja vibrante */
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  
  /* Efecto hover del botón */
  .btn-descargar:hover {
    background: #ff5722; /* Oscurecer el botón al pasar el mouse */
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(255, 87, 34, 0.5);
  }
  
  /* Estilos para las secciones */
  section {
    padding: 50px;
    background-color: #fff;
  }
  
  section h2 {
    font-size: 2em;
    margin-bottom: 20px;
  }
  
  .profile-img {
    max-width: 200px;
    border-radius: 50%;
    margin-top: 20px;
    filter: sepia(20%) blur(2px);
  }
  
  .services-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Espacio entre los elementos de servicio */
    justify-content: center; /* Centra los elementos de servicio horizontalmente */
  }
  
  .service-item {
    text-align: center;
    padding: 20px;
    background-color: #f0f0f0;
    border-radius: 10px;
    width: 30%;
  }
  
  .service-icon {
    max-width: 80px; /* Tamaño fijo para los íconos de servicio */
  }
  
  /* Popup styles */
  .popup {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
  }
  
  .popup-content {
    background-color: #2b2412;
    color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    width: 50%;
    max-width: 600px;
  }
  
  .popup-content p {
    white-space: pre-line;
  }
  
  .close-button {
    color: #222;
    font-size: 24px;
    font-weight: bold;
    position: absolute;
    right: 20px;
    top: 10px;
    cursor: pointer;
  }
  
  #skills {
    padding: 50px;
    background-color: #222; /* Fondo oscuro para la sección */
    color: #f9f9f9; /* Color del texto claro */
    text-align: center;
  }
  
  #skills h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
  }
  
  .skills-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  
  .skill-item {
    text-align: center;
    padding: 20px;
    background-color: #333; /* Fondo oscuro para los ítems */
    color: #f9f9f9; /* Color del texto claro */
    border-radius: 10px;
    width: 30%;
    margin-bottom: 20px;
    transition: transform 0.3s ease; /* Transición suave para el zoom */
  }
  
  .skill-item:hover {
    transform: scale(1.05); /* Aumenta el tamaño al hacer hover */
  }
  
  .skill-item h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
  }
  
  .skill-item p {
    font-size: 1em;
    line-height: 1.5;
    margin-bottom: 20px;
  }
  
  .skill-item .cta-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #f7c600; /* Color amarillo para el botón */
    color: #222; /* Color del texto del botón */
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1em;
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
  }
  
  .skill-item .cta-button:hover {
    background-color: #f0b700; /* Amarillo más oscuro al pasar el cursor */
    transform: scale(1.05);
  }
  
  /* Estilos para los botones */
  #ver-mas,
  #ver-menos {
    display: inline-block; /* Mostrar como bloque en línea */
    padding: 5px 12px;
    background-color: #f0db4f; /* Color de fondo amarillo */
    color: #1e1e1e; /* Color del texto oscuro */
    border: none; /* Sin borde */
    border-radius: 5px; /* Esquinas redondeadas */
    font-size: 1.1rem; /* Tamaño de la fuente */
    cursor: pointer; /* Cambia el cursor al pasar el mouse */
    transition: background-color 0.3s ease; /* Transición suave al cambiar de color */
    margin-top: 20px; /* Margen superior */
  }
  
  #ver-mas:hover,
  #ver-menos:hover {
    background-color: #e5c842; /* Color de fondo más oscuro al pasar el mouse */
  }
  
  /* Estilo para la sección de proyectos */
  #proyectos {
    background: #121212; /* Fondo negro */
    color: #f0f0f0; /* Texto claro para mejor contraste */
    padding: 50px 20px;
    border-radius: 10px;
    text-align: center;
  }
  
  /* Diseño de la cuadrícula de proyectos */
  .projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }
  
  /* Estilo de cada proyecto individual */
  .project-item {
    background: #1e1e1e; /* Fondo gris oscuro para diferenciarse del fondo negro */
    border: 1px solid #333; /* Borde sutil para separar elementos */
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
  }
  
  /* Efecto al pasar el mouse */
  .project-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(255, 255, 255, 0.2);
  }
  
  /* Títulos de los proyectos */
  .project-item h3 {
    color: #ff9800; /* Naranja vibrante para destacar */
    margin-bottom: 10px;
  }
  
  /* Descripción de los proyectos */
  .project-item p {
    color: #d0d0d0; /* Gris claro para mejor legibilidad */
    line-height: 1.5;
  }
  
  /* Estilos para los enlaces */
  .project-item a {
    color: #00bcd4; /* Azul cian para destacar */
    text-decoration: none;
    font-weight: bold;
  }
  
  .project-item a:hover {
    text-decoration: underline;
    color: #ff9800; /* Cambia a naranja al pasar el mouse */
  }
  
  /* Estilo para la parte de la bunker */
  #bunker {
    background: #121212; /* Fondo oscuro para un estilo tecnológico */
    color: #e0e0e0; /* Texto claro para contraste */
    padding: 40px;
    border-radius: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Sombra para dar profundidad */
    margin: 0;
    text-align: center; /* Centrar texto */
    width: 100%;
  }
  
  #bunker h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #ff9800; /* Color de acento vibrante */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Efecto de sombra */
  }
  
  #bunker p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
    color: #b0b0b0; /* Texto en gris claro */
  }
  
  #bunker a.btn {
    display: inline-block;
    padding: 12px 24px;
    background: #ff9800; /* Botón naranja vibrante */
    color: #121212; /* Texto oscuro en el botón */
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
  }
  
  #bunker a.btn:hover {
    background: #ff5722; /* Oscurecer el botón al pasar el mouse */
    color: #fff; /* Texto blanco para contraste */
    transform: translateY(-3px); /* Efecto de flotación */
    box-shadow: 0 4px 10px rgba(255, 87, 34, 0.5); /* Resaltar con sombra */
  }
  
  #bunker a.btn:active {
    transform: translateY(0); /* Botón vuelve al estado inicial */
    box-shadow: 0 2px 5px rgba(255, 87, 34, 0.3);
  }
  
  /* Estilos para la parte de contactos */
  #social-media {
    padding: 50px;
    background-color: #222; /* Fondo oscuro para la sección */
    color: #f9f9f9; /* Color del texto claro */
    text-align: center;
  }
  
  #social-media h3 {
    margin-bottom: 20px;
    font-size: 1.8em;
    color: #f9f9f9; /* Color del texto del encabezado claro */
  }
  
  .social-icons {
    display: flex;
    justify-content: center;
    gap: 20px; /* Espacio entre los iconos */
  }
  
  .social-icon {
    color: #f9f9f9; /* Color de los iconos */
    font-size: 2em; /* Tamaño de los iconos */
    transition: color 0.3s ease-in-out; /* Efecto de transición */
  }
  
  .social-icon:hover {
    color: #f7c600; /* Color amarillo al pasar el cursor */
  }
  
  /* Estilos para el footer */
  footer {
    position: relative;
    background-color: #282828;
    color: #fff;
    padding: 20px 0; /* Ajusta el padding superior e inferior */
    overflow: hidden; /* Asegúrate de que el efecto no se desborde */
  }
  
  /* Asegúrate de que el texto esté encima del efecto */
  footer .container {
    position: relative;
    z-index: 2;
  }
  
  /* Estilos para el contenedor de las olas */
  .wave-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px; /* Ajusta la altura de la ola */
    overflow: hidden;
    z-index: 1; /* Asegúrate de que el efecto esté detrás del contenido */
  }
  
  /* Efecto de olas */
  .wave {
    position: absolute;
    left: 50%;
    width: 200%;
    height: 100px; /* Por aquí puedo ajustar la altura de la ola */
    background: linear-gradient(
      to right,
      rgba(180, 170, 26, 0.893) 0%,
      rgba(200, 161, 35, 0.938) 50%,
      rgb(192, 184, 34) 100%
    );
    border-radius: 50%;
    transform: translateX(-50%);
    animation: wave 10s linear infinite;
  }
  
  .wave.wave2 {
    height: 150px; /* Mayor altura para olas más pronunciadas */
    background: linear-gradient(
      to right,
      rgba(210, 193, 26, 0.982) 0%,
      rgba(200, 185, 29, 0.776) 50%,
      rgba(200, 196, 34, 0.2) 100%
    );
    animation: wave 15s linear infinite;
  }
  
  @keyframes wave {
    0% {
      transform: translateX(-50%) translateY(0);
    }
    50% {
      transform: translateX(-50%) translateY(20px); /* Mayor desplazamiento vertical para olas más pronunciadas */
    }
    100% {
      transform: translateX(-50%) translateY(0);
    }
  }
  
  /* Estilos para alinear el texto y los íconos */
  footer .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    text-align: center; /* Centra el texto dentro de cada columna */
  }
  
  footer .col-4 {
    display: flex;
    align-items: center;
    justify-content: center; /* Centra el contenido dentro de cada columna */
  }
  
  footer .text-start {
    text-align: left;
    flex: 1; /* Ocupa el espacio disponible a la izquierda */
    padding-left: 20px; /* Espacio adicional a la izquierda */
  }
  
  footer .text-end {
    text-align: right;
    flex: 1; /* Ocupa el espacio disponible a la derecha */
    padding-right: 20px; /* Espacio adicional a la derecha */
  }
  
  footer .text-center {
    text-align: center;
    flex: 1; /* Ocupa el espacio central */
  }
  
  footer .text-center i {
    margin: 0 10px; /* Espacio entre los íconos */
  }
  
  /* Opcional: Estilos para los íconos en el footer */
  footer i {
    font-size: 1.5em;
    color: #fff; /* Color blanco para los íconos */
  }
  
  @media (max-width: 768px) {
    nav {
      justify-content: space-around; /* Espaciar los elementos de navegación */
    }
  
    ul {
      display: flex; /* Asegura que los elementos estén en una fila */
      flex-direction: row; /* Asegurar que los elementos estén en fila */
      justify-content: center; /* Centrar elementos en la fila */
      padding: 0; /* Eliminar el padding predeterminado de la lista */
      margin: 0; /* Eliminar el margen predeterminado de la lista */
      list-style-type: none; /* Eliminar los puntos de la lista */
    }
  
    li {
      flex: 1; /* Hacer que cada elemento ocupe espacio igual */
      font-size: 0.6rem; /* Ajusta este valor según el tamaño deseado */
      white-space: nowrap; /* Evitar saltos de línea en los elementos */
    }
  
    .principal-contenido {
      padding: 0; /* Espaciado interno para evitar que el contenido toque los bordes */
      text-align: center; /* Centrar el texto */
      background-color: #22222200; /* Fondo oscuro elegante */
      color: #f0f0f0; /* Texto claro para mejorar legibilidad */
      margin: 10px auto; /* Margen automático para centrar el div */
    }
  
    .principal-contenido h1 {
      font-size: 2rem; /* Tamaño del encabezado */
      margin-bottom: 10px; /* Espacio debajo del encabezado */
    }
  
    .principal-contenido h2 {
      font-size: 1.3rem; /* Tamaño del subtítulo */
      margin-bottom: 15px; /* Espacio debajo del subtítulo */
    }
  
    .principal-contenido p {
      font-size: 1rem; /* Tamaño del texto */
      margin-bottom: 20px; /* Espacio debajo del párrafo */
    }
  
    .principal-contenido .cta-button {
      font-size: 1.1rem; /* Tamaño del botón */
      padding: 12px 20px; /* Espaciado interno del botón */
      background-color: #f0db4f; /* Color del botón */
      color: #333; /* Color del texto del botón */
      border: none; /* Sin borde para un estilo minimalista */
      border-radius: 5px; /* Bordes redondeados para el botón */
      text-decoration: none; /* Eliminar subrayado en el enlace */
      display: inline-block; /* Hacer que el botón sea en línea pero como bloque */
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra suave para el botón */
      transition: background-color 0.3s ease; /* Transición suave al interactuar */
    }
  
    .principal-contenido .cta-button:hover {
      background-color: #e8c547; /* Cambiar el color en hover para interacción */
      color: #222; /* Color del texto en hover */
    }
  
    .skills-grid {
      display: flex;
      flex-direction: column; /* Coloca los elementos en columna */
      align-items: center; /* Centra los elementos */
    }
  
    .skill-item {
      width: 90%; /* Ajusta el ancho de los elementos */
      margin: 10px 0; /* Espaciado entre habilidades */
    }
  
    .projects-grid {
      display: flex;
      flex-direction: column; /* Coloca los proyectos en columna */
      align-items: center; /* Centra los elementos */
    }
  
    .project-item {
      width: 90%; /* Ajusta el ancho de los proyectos */
      margin: 10px 0; /* Espaciado entre proyectos */
    }
  
    #sobre-mi {
      padding: 40px 15px;
      min-height: 30px;
      background-color: #222; /* Fondo oscuro elegante */
      color: #f0f0f0; /* Texto claro para mejorar legibilidad */
      text-align: center; /* Centrar todo el texto */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra sutil para darle profundidad */
      max-width: 100%; /* Asegurar que no se desborde en móviles */
      margin: 0; /* Eliminar márgenes superior e inferior */
    }
  
    #sobre-mi h2 {
      font-size: 1.8rem; /* Ajustar el tamaño del encabezado */
      margin-bottom: 15px; /* Añadir espacio debajo del título */
      color: #ffffff; /* Color amarillo suave que resalta */
    }
  
    #sobre-mi p {
      font-size: 1.1rem; /* Ajustar el tamaño del texto */
      margin-bottom: 15px; /* Espaciado entre los párrafos */
      line-height: 1.6; /* Mejorar la legibilidad aumentando el espacio entre líneas */
    }
  
      
    #conocimientos {
      display: none;
    }
  
    .visible-images img {
      width: 60px; /* Tamaño de las imágenes en móviles pequeños */
      height: auto; /* Mantener la relación de aspecto */
    }
  
    #seccion-galeria {
      padding: 10px; /* Reducir espaciado interno en móviles pequeños */
    }
  }