/* Base styles for mobile */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Ledger&display=swap");
:root {
  --main-color: #526362;
  --secondary-color: #7a9e9f;
  --accent-color: #d9bf77;
  --background-color: #f4f4f9;
  --text-color: #e7e5cd;
}

h1,
h2,
h3,
h4,
h5,
h6,
label {
  font-family: "Cinzel", serif;
  line-height: 1.1;
  margin: 0;
}

ul,
ol {
  list-style-position: outside;
  padding: 1rem;
  margin: 0;
}

body {
  font-family: "Ledger", serif;
  font-size: 17px;
  margin: 0;
  padding: 0;
  background: var(--main-color);
  color: var(--text-color);
}

.contenedor {
  max-width: 90vw;
  width: 930px;
  margin: 0 auto;
  position: relative;
  height: 100%;
  display: grid;
  align-content: center;
}



.heroe {
  margin-top: 1rem;
  border-top: var(--text-color) 1px solid;
  border-bottom: var(--text-color) 1px solid;
  background: url(img/home_hero1.webp) no-repeat center center/cover;
  display: grid;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
  aspect-ratio: 4/3;
  position: relative;
}

.heroe_deg{
  background: rgb(2,0,36);
  background: linear-gradient(150deg, rgba(2,0,36,1) 2%, rgba(0,0,0,0) 25%);
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
}

.icono-menu {
  color: var(--text-color);
  font-size: 30px;
  position: absolute;
  left: 0px;
  top: 1rem;
  z-index: 100;
}

.logo img {
  width: 45%;
  min-width: 200px;
  height: auto;
  filter: drop-shadow(0px 12px 8px rgba(0, 0, 0, 0.5));
}

header {
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
}

nav {
  font-family: "Cinzel", serif;
}

section.gapme {
  margin-bottom: 3rem;
}

.titulo_seccion {
  font-size: 1.5rem;
}

.menu-principal {
  background-color: var(--main-color);
  color: var(--text-color);
  display: grid;
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 100vw;
  height: 120vh;
  z-index: 99;
  margin: 0px;
  align-items: center;
  grid-template-rows: 1fr;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.menu-principal.active {
  top: 50%;
}

nav ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  text-align: center;
  width: 100%;
  justify-content: center;
}

nav ul.social {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 2rem;
}

nav ul.menu a {
  font-size: 1.2rem;
}

nav ul a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  margin-left: 0.5rem;
  margin-right: 0.5rem;

  transition: opacity 0.3s;
}

i {
  color: var(--text-color);
}

.columnas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.h1_portada {
  position: relative;
  display: grid;
  grid-template-columns: 5fr 4fr;
  align-items: end;
  margin-top: 1rem;
}

.h1_portada img.agave_portada {
  max-width: 100%;
  justify-self: right;
  margin-bottom: -1rem;
}

.h1_portada h1 {
  font-size: 1.8rem;
}

ul.eventos {
  list-style: none;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding: 0px;
  margin-top: 1rem;
}

ul.eventos li.evento {
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 10px;
  position: relative;
  border-radius: 12px;
  background: url(<path-to-image>) lightgray 50% / cover no-repeat;
  box-shadow: 0px 250px 70px 0px rgba(0, 0, 0, 0),
    0px 160px 64px 0px rgba(0, 0, 0, 0.03), 0px 90px 54px 0px rgba(0, 0, 0, 0.1),
    0px 40px 40px 0px rgba(0, 0, 0, 0.17), 0px 10px 22px 0px rgba(0, 0, 0, 0.2);
}

ul.eventos li.evento .evento_info {
  display: none;
  position: absolute;
  top: 100%;
  margin-top: 1rem;
  width: 100%;
  text-align: center;
}

.mapa {
  width: 100%;
  height: 400px;
}

ul.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}

ul.galeria li.foto {
  aspect-ratio: 1/1;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 10px;
  width: 100%;
}

form.formulario {
  display: grid;
  gap: 1rem;
  width: 100%;
  margin-top: 1rem;
}

.formulario_dos_columnas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.campo_formulario {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  width: 100%;
  border-bottom: solid 1px var(--text-color);
  align-items: center;
  padding-bottom: 1rem;
}

.campo_formulario.topo {
  align-items: start;
}

.campo_formulario label {
  padding: 0%;
  font-weight: 600;
  padding-left: 1rem;
  color: var(--text-color);
}

.campo_formulario input,
.campo_formulario input[type="text"],
.campo_formulario input[type="email"],
.campo_formulario input[type="password"],
.campo_formulario input[type="tel"],
.campo_formulario input[type="url"],
.campo_formulario input[type="search"],
.campo_formulario textarea {
  width: 100%;
  border: 0px;
  font-size: 1rem;
  height: 100%;
  padding: 0px;
  font-family: "Ledger", serif;
  color: var(--text-color);
  background-color: transparent;
  margin: 0;
  color: white;
  outline: none;
  border-radius: 0px;
}

.submitter {
  width: fit-content;
  background-color: var(--text-color);
  color: var(--main-color);
  font-weight: 600;
  font-family: "Cinzel", serif;
  font-size: 1rem;
  border: 0px;
  padding: 0.5rem;
  padding-right: 3rem;
  border-radius: 0px;
  margin-top: 1rem;
}

.campo_formulario textarea {
  resize: none;
}

.aceptaciones label{
  font-size: .8rem;
  margin-top: 1rem;
}


footer{
  border-top:solid 1px var(--text-color);
  padding-top: 2rem;
  background-image: url(img/fondo_footer.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}


footer a{
  color: var(--text-color);
  text-decoration: none;
  cursor: pointer;
  padding: none;
}

footer a:hover{
  color: white;
}

footer i{
  margin-right: 1rem;
  display: inline-block;
  padding: none;
}

ul.footer-social{
  list-style: none;
  display: flex;
  padding: 0px;
  margin-bottom: 1rem;

}

ul.footer-contacto{
  list-style: none;
  padding: 0px;
}

.byklok{
  font-size: 0.5rem;
  text-align: center;
  margin-top: 1rem;
  display: block;
  align-self: end;
}

p.footer_info{
  font-size: .8rem;
}

.footer_logo{
  width: 100px;
  height: auto;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0px 250px 70px rgba(0, 0, 0, 0))
            drop-shadow(0px 160px 64px rgba(0, 0, 0, 0.03))
            drop-shadow(0px 90px 54px rgba(0, 0, 0, 0.1))
            drop-shadow(0px 40px 40px rgba(0, 0, 0, 0.17))
            drop-shadow(0px 10px 22px rgba(0, 0, 0, 0.2));
            margin-bottom: 2rem;
}

footer .columna.derecha{
  display: grid;
align-content: end !important;
justify-content: left;
}



/* Tablet styles */
@media (min-width: 960px) {
  .icono-menu {
    display: none;
  }

  .logo img {
    min-width: 200px;
    max-width: 500px;
    width: 40%;
  }

  .heroe {
    aspect-ratio: 2/1;
  }

  .menu-principal {
    background-color: transparent;
    position: relative;
    width: 100%;
    top: unset;
    transform: translateX(-50%);
    height: auto;
  }

  nav {
    display: grid;
    grid-template-rows: 1fr 1fr;
    justify-content: center;
    align-items: center;
  }

  nav ul {
    flex-direction: row;
  }

  nav ul a {
    position: relative;
    top: 0rem;
    transition: all 0.2s;
    transition-timing-function: ease-in;
    transition-duration: 0.2s;
  }

  nav ul.menu {
    margin-top: 1rem;
  }
  nav ul.menu a {
    font-size: 1rem;
  }

  nav ul.social {
    margin-top: 1rem;
    font-size: 1.2rem;
  }

  nav ul a:hover {
    top: -0.2rem;
  }

  .columnas {
    grid-template-columns: 1fr 1fr;
  }

  .columna.texto_portada {
    grid-column: 1/3;
  }

  .h1_portada {
    margin-top: -9rem;
  }

  .h1_portada h1 {
    font-size: 3rem;
  }

  .h1_portada img.agave_portada {
    margin-bottom: -2rem;
  }

  .titulo_seccion {
    font-size: 2.2rem;
  }

  ul.eventos,
  ul.galeria {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem;
  }

  ul.galeria {
    grid-template-columns: repeat(2, 1fr);ß
  }

  .formulario_dos_columnas {
    grid-template-columns: 1fr 1fr;
  }

  .footer_logo{
    width: 200px;
    margin-top: -100px;
  }
  
  footer .columna.derecha{
  align-content: center;
  justify-content: center;
  }
}

/* Desktop styles */
@media (min-width: 1024px) {
}