/* Estilo general */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  padding-top: 80px; /* Deja espacio para el header fijo */
}

/* Header */
header {
  position: fixed;  /* Fija el header en la parte superior */
  top: 0;
  left: 0;
  width: 100%;      /* Asegura que el header ocupe todo el ancho */
  z-index: 1000;    /* Asegura que esté encima de otros elementos */
  padding: 0;
}

/* Carrusel */
.carrusel {
  background-color: #1c3b69;
  color: white;
  text-align: center;
  padding: 10px 0;
  font-weight: bold;
  font-size: 1.2em;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  display: flex;  /* Aseguramos que los contenedores se alineen en línea */
}

/* Cada contenedor debe tener el mismo ancho para evitar saltos */
.contenedor3 {
  display: flex;
  animation: carruselHorizontal 35s linear infinite;
  white-space: nowrap; /* Evita que los elementos se rompan a varias líneas */
}

/* Cada span dentro del contenedor */
.carrusel span {
  display: inline-block;
  padding: 0 290px;
  letter-spacing: 0;
}

/* Animación de carrusel */
@keyframes carruselHorizontal {
  0% { transform: translateX(0); }  /* Comienza desde la posición 0 */
  100% { transform: translateX(-100%); }  /* Mueve el contenido a la izquierda */
}

/* Media Queries para Responsive */
@media (max-width: 768px) {
  .carrusel {
    font-size: 1em;
  }

  .carrusel span {
    padding: 0 150px; /* Reduce el espacio entre los textos */
  }
}

@media (max-width: 480px) {
  .carrusel {
    font-size: 0.9em;
    padding: 8px 0;
  }

  .carrusel span {
    padding: 0 80px; /* Ajusta más el espacio en pantallas muy pequeñas */
  }
}



/* Barra de navegación */
.nav {
  background-color: #ffc107;
  color: #1c3b69;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

.nav a {
  color: #000;
  text-decoration: none;
  font-weight: bold;
  margin: 0 10px;
  transition: color 0.3s ease;
}

.nav a:hover {
  color: white;
  text-decoration: none;
}

/* Barra de búsqueda */
.search-container {
  background-color: #f7db86fc;
  display: none;
  padding: 10px 20px;
}

.search-container input {
  width: calc(100% - 50px);
  padding: 10px;
  font-size: 1em;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.search-container button {
  background-color: red;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  font-size: 1em;
  cursor: pointer;
}

/* Responsividad */
@media (max-width: 768px) {
  .nav {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
  }

  .nav a {
    margin: 5px 0;
  }

  .carrusel span {
    padding: 0 150px; /* Reduce el espacio en pantallas más pequeñas */
  }

  .search-container input {
    width: 100%; /* Ajusta el ancho al 100% */
  }

  .search-container {
    display: block; /* Muestra la barra de búsqueda en pantallas pequeñas */
  }
}

@media (max-width: 480px) {
  .carrusel {
    font-size: 1em; /* Reduce el tamaño del texto del carrusel */
    padding: 8px 0;
  }

  .carrusel span {
    padding: 0 100px; /* Reduce aún más el espacio */
  }

  .nav {
    padding: 5px;
  }

  .nav a {
    font-size: 0.9em; /* Ajusta el tamaño de fuente en pantallas pequeñas */
  }
}


/* Ocultar menú móvil en pantallas grandes */
.menu-mobile {
  display: none;
}

/* Mostrar menú original en pantallas grandes */
.menu-desktop {
  display: flex;
}

.cart-alert{
  margin-top: -10px;
}

/* Responsividad */
@media (max-width: 768px) {
  /* Ocultar menú original en pantallas pequeñas */
  .menu-desktop {
    display: none;
  }

  /* Mostrar botón de menú móvil */
  .menu-mobile {
    display: block;
  }

  /* Estilo del botón de menú */
  #menuToggle {
    background-color: #ffc107;
    color: #1c3b69;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
  }

  /* Estilo del menú móvil desplegable */
  #mobileMenu {
    background-color: #f7db86fc;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    padding: 10px 20px;
  }

  #mobileMenu a {
    padding: 10px 0;
    color: #000;
    text-decoration: none;
    font-weight: bold;
  }

  #mobileMenu a:hover {
    color: white;
    background-color: #ffc107;
  }

  /* Mostrar menú móvil desplegable cuando se active */
  #mobileMenu.active {
    display: flex;
  }
}

/* Estilos generales para el modal */
.modal {
  display: none; /* Ocultar el modal por defecto */
  position: fixed;
  z-index: 1000; /* Asegurarse de que esté por encima de otros elementos */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
  padding-top: 100px; /* Espaciado superior */
  box-sizing: border-box;
  text-align: center;
}

/* Estilo para el contenido del modal */
.modal-content {
  background-color: #fff;
  border-radius: 10px;
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: left;
}

/* Estilo para el título del modal */
.modal-content h2 {
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
  color: #1c3b69;
  margin-bottom: 25px;
}

/* Estilo para el botón de cierre */
.close {
  color: #ed0606;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  left: 480px;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Estilo para la lista de PDFs */
.pdf-list {
  margin-bottom: 70px;
}

/* Estilo para cada item de la lista de PDFs */
.pdf-item {
  margin-bottom: 10px;
  font-size: 16px;
}

/* Estilo para el botón de descarga */
.button3 {
  background-color: #ffc107; 
  color: #1c3b69;
  font-weight: bold;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
}

.button3:hover {
  background-color: #1c3b69;
  color: white;
}

/* Estilo para la zona de fondo oscurecido */
.modal:target {
  display: block;
}