:root {
  --fondo: #ffeec4;/*Este es el colol del fondo de la pagina.*/
  --papel: #ffeec4;/*Este es el color del fondo de los items.*/
  --texto: #2a2213;/*Este es el color que tiene la fuente.*/
  --marron: #744711dd;/*Este es el color de los botones y subtitulos.*/
  --marron-claro: #b9731ddd;/*Este es el color de los textos Inicio, Categorías y Sobre Nosotros que está bajo el logo.*/
  --resaltado: #eac587;/*Este es el color de los textos que poseen un enlace.*/
  --fuente: 'Georgia', serif; /*Estas son las fuentes que utiliza nuestro proyecto.*/
}

* {/*estos son los bordes de la pagina web*/
  margin: 0;
  padding: 0;/*0*/
  box-sizing: border-box;
}

body {
  font-family: var(--fuente);/*Se le establece una fuente*/
  background-color: var(--fondo);/*Se le establece color al fondo*/
  color: var(--texto);/*Se le da color al texto*/
  line-height: 1.6;/*La separación ente los elementos en la pajina web*/
  padding: 1rem;
  /*background-image: url('textura-papel.jpg');  opcional */
  background-size: cover;
  background-blend-mode: multiply;
}

header {/*Sección de la cabecera*/
  background-color: var(--papel);/**/
  border-bottom: 2px dashed var(--marron);/*Color de los bordes*/
  padding: 1rem 2rem;
  text-align: center;/*Esta es la alineación del texto, la cual está en el centro*/
  box-shadow: 0 3px 8px rgba(134, 3, 210, 0.15);/*Esta es la sombra del botón*/
}

header h1 {/*sección de Encabezado*/
  font-size: 2.7rem;/*Tamaño de la fuente*/
  color: var(--marron);/*Color de la fuente */
  letter-spacing: 1px;/*Espacio entre caracteres*/
}

nav ul { 
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 0.5rem;
}
li{
  list-style: none;/*Quita los puntos de las listas*/
}
nav a {
  text-decoration: none;/*Decorado del texto*/
  color: var(--marron-claro);/*Color*/
  font-weight: bold;
}

nav a:hover {
  color: var(--resaltado);/*Color resaltado*/
  text-decoration: underline;/*Decoración del texto*/
}

main {/*Principal*/
  padding: 2rem;/*relleno*/
  max-width: 800px;/*Altura maxima*/
  margin: 0 auto;/*Margen */
}

section h2 {/*segundo encabezado*/
  font-size: 1.8rem;/*Tamaño de la fuente*/
  margin-bottom: 1rem;/*Margen del espacio que ocupa*/
  color: var(--marron);/*Color del texto*/
  text-align: center;/*alineación del texto*/
}

form {/*Lugar donde están los problemas*/
  display: flex;
  flex-direction: column;/*Dircción a la que salen los items*/
  align-items: center;/*Alineación de los items*/
  margin-bottom: 3rem;/*margen entre la parte mas baja*/
  gap: 1rem;/*Grosor*/
}

select {/*problema seleccionado*/
  padding: 0.6rem;
  border: 2px solid var(--marron);/*color de los bordes*/
  font-size: 1rem;/*tamaño de la fuente*/
  background-color: var(--papel);/*Color de fondo*/
  color: var(--texto);/*Color de la fuente*/
}

button {/*Sección del botón*/
  padding: 0.5rem 1.2rem;
  background-color: var(--marron);/*Color de fondo*/
  color: white;/*color del texto*/
  border: none;/*borde*/
  font-weight: bold;/*Peso de la fuente (Negrita)*/
  cursor: pointer;/*cambio de color cuando el mouse se acerca*/
  border-radius: 3px;/*radio del vorde*/
}

button:hover {/*Boton*/
  background-color: var(--marron-claro);/*Color del boton*/
}

article {/*Articulos con dolores comúnes*/
  background-color: var(--papel);/*Color de fondo*/
  border: 1px solid #b48d5a;/*Color de bordes*/
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-radius: 6px;/*Radio de los bordes*/
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.08);/*Sombreado*/
}

article h3 {/*Encabezado 3*/
  color: var(--marron);/*Color del encabezado*/
  margin-bottom: 0.4rem;/*Margen */
}

footer {/*Pie de pajina*/
  background-color: var(--papel);/*Color del fondo*/
  text-align: center;/*Alineacion del texto*/
  padding: 1rem;
  font-size: 0.9rem;/*Tamaño de la fuente*/
  border-top: 1px dashed var(--marron);
  margin-top: 2rem;/*Margen de arriba*/
}

img {/*Sección de la imagen*/
  max-width: 8%;/*Altura*/
  height: auto;/*Peso*/
}


.fuente-remedios {/*Esta es la fuente del texto de los remedios*/
  font-size: 0.95rem;   /*Este se el tamaño del texto*/
  color: var(--marron-claro);/*Color del texto*/
}

.nav-inicio {/*Barra de navegación*/
  text-align: center;/*alineacion*/
  margin-top: 2rem;/*margen*/
}
a{/**/
  text-decoration: none;
  color: var(--white);/*Color del texto*/
}