@import url('https://fonts.googleapis.com/css2?family=Fauna+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');
/* INDEX
...variables...
...general...
...tipografia...
...menu...
...formulario...
*/


/* GENERAL  */


/* variables */

:root {
  --primario: #FFFAF0;
  --secundario: #251411;
  --azuloscuro: #051E47;
  --azulclaro: #CEE5FE;
  --lilaoscuro: #444BA0;
  --lilaclaro: #CED8FE;
  --amarillooscuro: #AC942F;
  --amarilloclaro: #F9F0CC;
  --rojooscuro: #660500;
  --rojoclaro: #FFCBC8 ;
  --verdeoscuro: #3F6F35;
  --verdeclaro: #E1F5BA;
}

/* general */

.primario{
  background-color: var(--primario);
  color: var(--secundario);
}

.secundario{
  background-color: var(--secundario);
  color: var(--primario)
}

.azuloscuro{
  background-color: var(--azuloscuro);
  color: var(--azulclaro);
}

.azulclaro{
  background-color: var(--azulclaro);
  color: var(--azuloscuro);
}

.lilaoscuro{
  background-color: #444BA0;
  color: var(--lilaclaro);
}

.lilaclaro{
  background-color: var(--lilaclaro);
  color: var(--lilaoscuro);
}

.amarillooscuro{
  background-color: #AC942F;
  color: var(--amarilloclaro);
}

.amarilloclaro{
  background-color: var(--amarilloclaro);
  color: var(--amarillooscuro);
}

.rojooscuro{
  background-color: var(--rojooscuro);
  color: var(--rojoclaro);
}

.rojoclaro{
  background-color: var(--rojoclaro);
  color: var(--rojooscuro);
}

.verdeoscuro{
  background-color: var(--verdeoscuro);
  color: var(--verdeclaro);
}

.verdeclaro{
  background-color: var(--verdeclaro);
  color: var(--verdeoscuro);
}


*{
  box-sizing: border-box;
  font-family: "Fauna One", serif;
  font-weight: 400;
  font-style: normal;

}

/* tipografia */


h1{
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 3rem;
  margin: 0px;
  margin-top: 20px;
}

h2{
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  border: 2px solid var(--secundario); /* Borde: 3px de ancho, estilo "dotted", color rojo oscuro de tu variable */
  padding: 10px; /* Relleno (espacio entre el borde y el texto) de 10px en todos los lados */
  width: fit-content; /* Opcional: para que el borde se ajuste al ancho del contenido */


}

h3{
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
}

.italic
{
  font-style: italic;
  font-size: 0.90rem;

}

.italicbold
{
  font-style: italic;
  font-weight: 600;
  
}

html
{
    width: 100%;
    height: 100%;
    margin: 0;
}

body{
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: center;

}

footer{
  margin: 0%;
}

.fondo{
  background-color: var(--);
}



#principal{
    width: 100%;
    margin: auto;

}

.columna
{
  width: 100%;
  
}

ul {
    list-style-type: none;
  }


/* menú navegación */

nav li{
  display: inline;
  
}
 

nav{
  border: 2px solid;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;

}

.menu-icon {
  font-size: 30px;
  color: primario;
  cursor: pointer;
  display: none; /* Oculto por defecto */
}

.nav-links {
  list-style: none;
  padding: 0;
  display: flex;
}


.nav-links li {
  padding: 10px;

}


.nav-links a {
  color: var(--secundario);
  text-decoration: none;
  cursor: default;
}



nav.fila {
  flex-wrap: nowrap; /* Evita que los elementos dentro del nav se envuelvan */
  justify-content: space-between; /* Distribuye el espacio entre logo y ul */
  align-items: center; /* Centra verticalmente los elementos */
  padding: 0 15px; /* Añade padding si lo deseas */
}

.logo
{
 padding: 2%;

}

#ciudades{

}

#ciudades ul{
    margin: 0;
    padding: 0;
    height: 5rem;
}


#ciudades div {
 display: flex;
 flex-direction: column;
 padding-left: 40px;
 height:13rem;

}

#ciudades a {
display: flex;
width: 25%;
padding: 5px; /* Añade un espacio interior de 10 píxeles */
margin-bottom: 10px; /* Añade un margen inferior de 10 píxeles entre columnas */
text-align: center; /* Centra el texto dentro de la columna */
text-decoration: none;
}

.fila{
    display: flex; 
    flex-wrap: wrap;
    width: 100%;
    padding-top: 20px;

}

img
{
    width: 100%;
}

.img-h-movil{
  aspect-ratio: 16 / 9;
  object-fit: cover;

}

/* DISTRIBUCION COLUMNAS */
.horizontal-final{
  justify-content: flex-end;
  
  }
  
  .horizontal-separado{
  justify-content: space-around
  ;
  }
  
  .horizontal-noseparado
  {
      justify-content: space-between;
  }
  
  .horizontal-centro
  {
  justify-content: center;
  }

  .vertical-centrado
  {
  align-items: center;
  }
  
  .alineado-h-abajo
  {
      align-self: flex-end;
  }
.alieado-h-derecha{
  justify-content: flex-end;
}

  
  .item-centrado
  {
      align-self: center;
  }
  

  /* Estilos para dispositivos móviles */

  @media screen and (min-width: 769px) {
    .nav-links li a {
        text-align: right; /* Alinea el texto de los enlaces a la derecha */
    }
  
    .nav-links {
        justify-content: flex-end; /* Opcional: alinea los elementos li a la derecha */
    }
  }

  @media screen and (max-width: 768px) {
    .menu-icon {
        display: block; /* Visible solo en móviles */
    }


    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        text-align: center;
    }


    .nav-links.active {
        display: flex; /* Se muestra cuando se activa */
    }
}




  /* media queries-movil grande*/
  @media screen and (min-width:576px) {
    #principal{
        width: 540px;
    }
    .movil-doce {
      width: 100%;
    }
    
    .movil-once {
      width: 91.6667%;
    }
    
    .movil-diez {
      width: 83.3333%;
    }
    
    .movil-nueve {
      width: 75%;
    }
    
    .movil-ocho {
      width: 66.6667%;
    }
    
    .movil-siete {
      width: 58.3333%;
    }
    
    .movil-seis {
      width: 50%;
    }
    
    .movil-cinco {
      width: 41.6667%;
    }
    
    .movil-cuatro {
      width: 33.3333%;
    }
    
    .movil-tres {
      width: 25%;
    }
    
    .movil-dos {
      width: 16.6667%;
    }
    
    .movil-uno {
      width: 8.3333%;
    }
  
  }
  /* tablet vertical*/
 
  @media screen and (min-width:768px) {
    #principal{
        width: 720px;
    }
   
    .tablet-v-doce {
      width: 100%;
    }
    
    .tablet-v-once {
      width: 91.6667%;
    }
    
    .tablet-v-diez {
      width: 83.3333%;
    }
    
    .tablet-v-nueve {
      width: 75%;
    }
    
    .tablet-v-ocho {
      width: 66.6667%;
    }
    
    .tablet-v-siete {
      width: 58.3333%;
    }
    
    .tablet-v-seis {
      width: 50%;
    }
    
    .tablet-v-cinco {
      width: 41.6667%;
    }
    
    .tablet-v-cuatro {
      width: 33.3333%;
    }
    
    .tablet-v-tres {
      width: 25%;
    }
    
    .tablet-v-dos {
      width: 16.6667%;
    }
    
    .tablet-v-uno {
      width: 8.3333%;
    }
  
  }
  
  /* tablet horizontal*/
  @media screen and (min-width:992px) {
    #principal{
        width: 960px;
    }

    .tablet-v-doce {
      width: 100%;
    }
    
    .tablet-v-once {
      width: 91.6667%;
    }
    
    .tablet-v-diez {
      width: 83.3333%;
    }
    
    .tablet-v-nueve {
      width: 75%;
    }
    
    .tablet-v-ocho {
      width: 66.6667%;
    }
    
    .tablet-v-siete {
      width: 58.3333%;
    }
    
    .tablet-v-seis {
      width: 50%;
    }
    
    .tablet-v-cinco {
      width: 41.6667%;
    }
    
    .tablet-v-cuatro {
      width: 33.3333%;
    }
    
    .tablet-v-tres {
      width: 25%;
    }
    
    .tablet-v-dos {
      width: 16.6667%;
    }
    
    .tablet-v-uno {
      width: 8.3333%;
    }
  
  }
  /* laptop*/
  @media screen and (min-width:1200px) {
    #principal{
        width: 1140px;
    }
    .laptop-doce {
      width: 100%;
    }
    
    .laptop-once {
      width: 91.6667%;
    }
    
    .laptop-diez {
      width: 83.3333%;
    }
    
    .laptop-nueve {
      width: 75%;
    }
    
    .laptop-ocho {
      width: 66.6667%;
    }
    
    .laptop-siete {
      width: 58.3333%;
    }
    
    .laptop-seis {
      width: 50%;
    }
    
    .laptop-cinco {
      width: 41.6667%;
    }
    
    .laptop-cuatro {
      width: 33.3333%;
    }
    
    .laptop-tres {
      width: 25%;
    }
    
    .laptop-dos {
      width: 16.6667%;
    }
    
    .laptop-uno {
      width: 8.3333%;
    }
  
  }
  /* desktop*/
  @media screen and (min-width:1400px) {
    #principal{
        width: 1320px;
    }
    .desk-doce {
      width: 100%;
    }
    
    .desk-once {
      width: 91.6667%;
    }
    
    .desk-diez {
      width: 83.3333%;
    }
    
    .desk-nueve {
      width: 75%;
    }
    
    .desk-ocho {
      width: 66.6667%;
    }
    
    .desk-siete {
      width: 58.3333%;
    }
    
    .desk-seis {
      width: 50%;
    }
    
    .desk-cinco {
      width: 41.6667%;
    }
    
    .desk-cuatro {
      width: 33.3333%;
    }
    
    .desk-tres {
      width: 25%;
    }
    
    .desk-dos {
      width: 16.6667%;
    }
    
    .desk-uno {
      width: 8.3333%;
    }
  
  }