@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

.seccion {
  width: 100%;
  background: transparent;
  max-width:1200px;
  text-align: left;
  margin-top: 20px;
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background: #ffffff00;
  /* background: transparent ; */
  margin-bottom: 70px;
  height: 0;
}

#caja1 > ul{
  display: flex;
  justify-content: left;
}
#caja2 > ul{
  display: flex;
  justify-content: left;
}
#caja3 > ul{
  display: flex;
  justify-content: left;
}
#caja4 > ul{
  display: flex;
  justify-content: left;
}
#caja5 > ul{
  display: flex;
  justify-content: left;
}
#caja6 > ul{
  display: flex;
  justify-content: left;
}


.objeto1 {
  /* border: 1px solid #ccc; */
}

body {
  padding-top: 0px;
  font-family: "Mazda-regular", Sans-serif;
  font-size: 16px;
  color: #333;
  background-color: #f8f9fa;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;

  background-image: url("assets/fondo.jpeg");
  background-repeat: no-repeat;
   /* mueve el fondo ligeramente hacia abajo */
  background-size: 100%; /* reduce el “zoom” de la imagen */
  background-attachment: fixed;

  margin: 0;
  font-family: "Montserrat", sans-serif;
}

img {
  max-width: 30%;
  height: auto;
  width: auto;
  margin-bottom: 0px;
  margin-top: 0px;
  /* position: relative; */
  /* bottom: 110px; */
}

h1 {
  font-family: "Mazda-regular", Sans-serif;
  color: #d7d1d1;
  margin-top: 120px;
  padding-top: 25px;
  margin-bottom: 0px;
  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000,
    1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
h2 {
  font-size: 1.4em;
  color: #fff;
  width: auto;
  cursor: pointer;
  margin: 0;
  padding: 14px 20px;
  /* border: 1px solid #ccc; */
  background: #00000048;
   /* background-color: rgb(145, 10, 45); */
  font-weight: 500;
  height: 50px;
  text-align: center;
}

h2:hover {
  background-color: rgb(145, 10, 45);
}


ul {
  list-style-type: none;
  padding: 0 20px; /* Agregamos padding solo a los lados */
  margin: 0;
  max-height: 0;
  opacity: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out,
    padding 0.5s ease-in-out, gap 0.5s ease-in-out;
  margin-left: auto;
  justify-content: center;
}

ul.mostrar {
  max-height: 470px; /* Ajusta esto según el contenido */
  opacity: 1;
  width: 100%;
  flex-wrap: wrap;
  padding: 10px 10px; /* Agrega espacio cuando esté abierto */
  display: flex;
  gap: 10px;
  
}

/* Agregar transicion, para que se abra lento el ul cuando pasa de display none a block */

a {
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 20px;
  color: #eee;
  background-color: rgb(145, 10, 45);
  border-radius: 2px;
  display: block;
  white-space: normal;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  align-items: center;
  word-break: break-word;
}

a:hover {
  background-color: rgb(104, 8, 34);
}

/* Media Queries para dispositivos móviles */
@media (max-width: 768px) {
  h1 {
    font-size: 1.5em; /* Tamaño más pequeño para móviles */
  }

  body{
    background-size: auto; /* Asegura que el fondo cubra toda el área */
  } 

  h2 {
    font-size: 1em; /* Tamaño más pequeño para móviles */
    padding: 10px 15px;
  }

  ul{
    justify-content: left;
    font-size: 12px;
  }

  ul.mostrar {
    max-height: 1000px; /* Ajusta según el contenido */
    padding-top: 5px;
  }

  a {
    padding: 4px 10px; /* Padding más pequeño para móviles */
  }

  .objeto1{
    width: 20rem;
  }

  .seccion {
    width: 100%;
    grid-template-columns: auto; /* Una sola columna en móviles */
    justify-content: center;
    align-items: center;
    margin-top: 150px;
    /* background-color: #000000; */
    height: 100%;


  }

  video {
    max-width: 95%; /* El video ocupa todo el ancho en móviles */
  }
}