/* Estilos comunes para ambos dispositivos */
body {
  margin: 0;
  padding: 0;
}

.header-content {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left h1 {
  white-space: nowrap;
  text-transform: none;
  font-size: 27px;
  font-weight: var(--g-regular-weight, normal);
  font-family: "Century Gothic";
  margin-left: 20px; /* Ajusta el margen izquierdo según tus preferencias para dispositivos móviles*/
  color: #000; /* Cambia el color del texto a negro */
}

/* Estilos para dispositivos de escritorio */
@media screen and (min-width: 769px) {
    .header-left h1 {
    margin-left: 10px; /* Ajusta el margen izquierdo según tus preferencias para dispositivos móviles */
  }
}

/* Estilos para dispositivos de escritorio */
@media screen and (min-width: 769px) {
  .header-left h1 {
    margin-left: -270px; /* Ajusta el margen izquierdo según tus preferencias para dispositivos de escritorio */
  }
} 
    
  .menu ul {
    list-style: none;
    display: flex;
    margin-right: -70px; /* Ajusta el margen derecho según tus preferencias */
  }
  .menu li {
    margin-right: 20px;
  }
  .menu a {
    text-decoration: none;
    color: #000;
    font-family: "Century Gothic";
    font-size: 20px;
    text-transform: uppercase; /* Esto convierte el texto a mayúsculas */
    padding: 10px; /* Ajusta el espacio entre las palabras */
  }
}

/* Estilos para dispositivos móviles */
@media screen and (max-width: 768px) {
  /* Estilos para el menú hamburguesa */
  .menu ul {
    list-style: none;
    display: none;
    text-align: center;
    background-color: #000;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 1;
  }
  .menu li {
    margin: 15px 0;
  }
  .menu a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    text-transform: uppercase; /* Esto convierte el texto a mayúsculas */
  }
  /* Mostrar el menú móvil cuando se hace clic en el ícono de hamburguesa */
  #menuToggle:checked + .menu ul {
    display: block;
  }
}
/* Estilo para ocultar el checkbox en modo escritorio */
@media screen and (min-width: 769px) {
  .menu input[type="checkbox"] {
    display: none;
  }
}

/* Estilos para el menú */
.menu {
  background-color: #fff; /* Cambia el color de fondo deseado */
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu ul {
  list-style: none;
  padding: 0;
  display: flex;
}

.menu ul li {
  margin-right: 20px;
}

.menu ul li:last-child {
  margin-right: 0;
}

.menu a {
  text-decoration: none;
  color: #000 !important;
  font-family: "Century Gothic", sans-serif; /* Fuente "Century Gothic" */ !important;
  font-size: 20px !important;
}

/* Otros estilos de tu menú aquí */

/* Estilos para dispositivos móviles */
@media screen and (max-width: 768px) {

  /* Estilos para el menú hamburguesa */
  .menu ul {
    list-style: none;
    padding: 0;
    text-align: center; /* Centrar los elementos del menú en dispositivos móviles */
    background-color: #000;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 1;
    flex-direction: column;
    display: none;
  }

  .menu ul.active {
    display: flex;
  }

  .menu input[type="checkbox"] {
    display: none;
  }

  .menu-label {
    display: block;
    position: relative;
    cursor: pointer;
    padding: 20px;
  }

  .menu-label .menu-icon {
    position: absolute;
    top: 50%;
    right: 20px; /* Posición del icono de hamburguesa */
    transform: translateY(-50%);
    width: 30px;
    height: 3px;
    background-color: #fff;
    transition: all 0.3s ease;
  }

  .menu-label .menu-icon:before,
  .menu-label .menu-icon:after {
    content: "";
    position: absolute;
    width: 30px;
    height: 3px;
    background-color: #fff;
    transition: all 0.3s ease;
  }

  .menu-label .menu-icon:before {
    top: -10px;
    left: 0px; /* Ajusta el desplazamiento horizontal de la línea central hacia la derecha */
  }

.menu-label .menu-icon:after {
  top: 10px; /* Ajusta la distancia vertical entre las líneas según tus preferencias */
  left: 0px; /* Ajusta el desplazamiento horizontal de la línea central hacia la derecha */
}


  .menu input[type="checkbox"]:checked + .menu-label .menu-icon {
    background-color: transparent;
  }

  .menu input[type="checkbox"]:checked + .menu-label .menu-icon:before {
    transform: rotate(-45deg);
    top: 0;
  }

  .menu input[type="checkbox"]:checked + .menu-label .menu-icon:after {
    transform: rotate(45deg);
    top: 0;
  }

/* Alinea el botón de hamburguesa debajo del nombre "Yoel Acosta" */
.menu-label {
  position: absolute;
  bottom: 30px; /* Ajusta esta distancia para subir el botón */
  left: -20%;
  transform: translateX(-40%) translateY(55%); /* Ajusta esta distancia para alinear verticalmente */
}


/* Estilos CSS aquí */
/* ... (otros estilos) ... */

/* Estilo para el contenedor de la tabla y el encabezado */
.obras-container {
  margin-left: 20%; /* Agrega margen a la izquierda para mover los elementos hacia la derecha */
}

/* Estilo para la tabla de obras */
.obras-table {
  font-family: "Century Gothic", sans-serif; /* Fuente "Century Gothic" */;
  color: rgb(106, 107, 108);
  font-size: 16px;
  border-collapse: collapse; /* Combina los bordes de las celdas para un espaciado más preciso */
  border-spacing: 2px 0; /* Espaciado horizontal de 2 píxeles y vertical de 0 (sin espacio vertical) */
}

/* Estilo para las celdas TD de la tabla */
.obras-table td {
  padding: 5px; /* Ajusta el espaciado interno de las celdas según tus preferencias */
}

/* Estilo para el encabezado "OBRA" */
.obras-header {
  font-family: "Century Gothic", sans-serif; /* Fuente "Century Gothic" */
  color: rgb(106, 107, 108);
  font-size: 16px;
}

/* Estilo para los enlaces dentro de la tabla de obras */
.obras-table a {
  color: rgb(106, 107, 108) !important; /* Establece el color de los enlaces */
  text-decoration: none; /* Elimina la subraya de los enlaces */
}

/* Cambiar el color de fondo del menú horizontal */
nav.menu {
  background-color: #fff !important;
}



/* Estilos globales para todo el texto en la página */
body, h2, p {
  font-size: 18px !important;
}












/* ... (otros estilos) ... */