/* Variables CSS */
:root {
    --color-oscuro: #000;
    --color-medio: #ccc;
    --color-claro: #fff;
    --color-secundario: #b22b2e;
    --color-secundario-claro: #e1abb2;
}

/* Estilos de la cabecera */
h1 {
  color: var(--color-claro);
/*  background-color: var(--color-secundario); */
  font-size: 200%;
  padding: .5% 0;
  text-align: center;
}

h2 {
  color: var(--color-secundario-claro);
/*  background-color: var(--color-secundario); */
  text-align: center;
  font-size: 160%;
  padding: .2% 0;
  text-transform: uppercase;
}

h3, h4, h5 {
  color: var(--color-secundario);
  font-size: 140%;
  padding: .5em 0;
  text-align: center;
}

/* Estilos del menú */
.cabecera {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; 
  z-index: 1000;
}

.menu {
  position: fixed;
  width: 100%;
  list-style-type: none;
  top: 120px;
/*  background-color: var(--color-secundario); */
  text-align: center; /* Añade esta línea para centrar el contenido */
}

.menu ul {
  list-style-type: none;
  overflow: hidden;
/*  background-color: var(--color-secundario); */
  display: inline; /* Cambia 'inline-block' a 'inline' para que los elementos estén en línea horizontalmente */
}

.menu li {
  display: inline-block; 
/*   margin-right: .5%; /* Agrega margen derecho para separar los elementos del menú */
/*  background-color: var(--color-secundario); */
  color: var(--color-claro);
  padding: 1%;
}

.menu li:last-child {
  margin-right: 0; /* Elimina el margen derecho en el último elemento del menú para evitar un espacio adicional */
}

.menu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 1%;
  text-decoration: none;
  background-color: var(--color-secundario);
}

.menu li:hover {
  background-color: var(--color-secundario-claro);
  border-radius: 10px;
  padding: 1%; /* Aumenta el padding para un poco más de espacio */
}

.menu a:hover {
  background-color: var(--color-secundario-claro);
  border-radius: 10px;
  padding: 1%; /* Aumenta el padding para un poco más de espacio */
}

.menu .active {
  background-color: var(--color-secundario-claro);
  color: var(--color-secundario);
  border-radius: 10px;
  padding: 1%;
}

/* Slider */
body{
	text-align: center;
}

img {
/*  width: 100%; */
  max-height: 800px;
}

input{
	font-size: 40pt;
	background-color: rgba(0,0,0,0.1);
	color: white;
	border-width: 0px;
  cursor: pointer;
}

input:hover{
	background-color: rgba(0,0,0,0.5);
}

#boton1{
	float: left;
}

#boton2{
	float: right;
}

form{
	position: absolute;
	top: 50%;
	left: 10%;
	width: 80%;
  height: 80%;
  max-height: 800px;
}

p{
	clear: both;
	margin-top: 50%;
	text-align: center;
}