:root{
    /*colores para botones, enlaces y destacados*/--primario: white;
    --color-hover:#C62828;
    --color-fondo:#FFFFFF;
    --fondo-secundario:#F5F5F5;
    --color-encabezado:#212121;
    --color-separadores:#DDDDDD;
    --botones:#424242;
    --colore-titulos-principales:#212121;
    
}
/*Colores personalizados par la pagina*/
.lato-thin {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.lato-thin-italic {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.lato-light-italic {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.lato-bold-italic {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.lato-black-italic {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: italic;
}



.titulo-principal{
    text-decoration: none;
    text-align: center;    
    color: var(--colore-titulos-principales);

}

.lato-thin {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.lato-thin-italic {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.lato-light-italic {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.lato-bold-italic {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.lato-black-italic {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: italic;
}

.playwrite-vn-guides-regular {
  font-family: "Playwrite VN Guides", cursive;
  font-weight: 400;
  font-style: normal;
}


/*-------------fuente lato agregado desde google fonts-----------------*/

.body{
    font-family:"Playwrite VN Guides", cursive;

}


.titulo-principal{
    font-family: "Lato", sans-serif;
}
.navbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-encabezado);
    padding:10px 20px;
}
.navegacion-principal {
  display: flex;
  align-items: center;
  gap: 20px; /* ← añade espacio entre los <a> */
  font-family: "Lato", sans-serif;
  font-weight: 500;
}

.navegacion-principal a {
  color: var(--color-separadores);
  text-decoration: none;
  padding: 8px 12px; /* opcional: hace los botones más grandes */
  border-radius: 4px; /* opcional: suaviza los bordes en hover */
}

.navegacion-principal a:hover {
  background-color: var(--color-hover);
  color: white;
}

.logo{
    height:50px;
    width: auto;
    display:block;
}