body {
  font-family: 'Arial', sans-serif; /* Establece la fuente predeterminada del sitio */
  margin: 0;                        /* Elimina el margen por defecto del body */
  background-color: #fff;           /* Fondo blanco para toda la página */
  color: #111;                      /* Color de texto general: gris muy oscuro */
}

/* Header */
.header {
  background-color: #000;          /* Fondo negro para el encabezado */
  color: white;                    /* Texto blanco en el encabezado */
  padding: 15px;                   /* Espaciado interno de 15px en todos los lados */
  text-align: center;             /* Centra el texto horizontalmente */
}

.header__logo {
  margin: 0;                       /* Elimina márgenes del logo */
  font-size: 32px;                 /* Tamaño grande para el texto del logo */
  letter-spacing: 3px;            /* Espaciado entre letras */
}

/* Navegación */
.nav__menu {
  list-style: none;               /* Quita los puntos de la lista */
  margin: 10px 0 0 0;             /* Margen superior de 10px, el resto en 0 */
  padding: 0;                     /* Quita el relleno por defecto */
  text-align: center;            /* Centra los elementos de la navegación */
}

.nav__item {
  display: inline-block;         /* Hace que los ítems se alineen en línea, pero se comporten como bloques */
  margin: 0 20px;                /* Espaciado horizontal entre ítems */
}

.nav__link {
  text-decoration: none;         /* Quita el subrayado de los enlaces */
  color: white;                  /* Color de texto blanco */
  font-weight: bold;            /* Texto en negrita */
}

.nav__link:hover {
  text-decoration: underline;   /* Al pasar el mouse, muestra subrayado */
}

/* Banner */
.banner {
  background: url('img/banner.jpg') no-repeat center;/* Imagen de fondo sin repetirse, centrada */
  background-size: cover;         /* Hace que la imagen cubra toda el área del banner */
  color: white;                   /* Texto blanco para contraste */
  text-align: center;            /* Centra los textos */
  padding: 60px 20px;            /* Espaciado interior: 60px arriba/abajo y 20px laterales */
}

.banner__title {
  font-size: 36px;               /* Tamaño grande para el título */
  margin: 0 0 10px 0;            /* Sin margen arriba, 10px abajo */
}

.banner__text {
  font-size: 18px;               /* Tamaño del texto descriptivo */
  margin: 0;                     /* Sin margen */
}

/* Productos */
.products {
  padding: 40px 10px;            /* Espaciado interno: 40px arriba/abajo, 10px laterales */
  text-align: center;            /* Centra el contenido de productos */
}

.products__title {
  font-size: 24px;               /* Tamaño para el título de la sección */
  margin-bottom: 30px;           /* Espacio debajo del título */
}

/* Lista de productos */
.products__list {
  text-align: center;            /* Centra las tarjetas de producto */
}

/* Tarjetas */
.product-card {
  display: inline-block;         /* Alinea varias tarjetas horizontalmente */
  width: 220px;                  /* Ancho fijo para las tarjetas */
  margin: 15px;                  /* Espacio alrededor de cada tarjeta */
  padding: 15px;                 /* Espaciado interno */
  background: #f9f9f9;           /* Fondo gris muy claro */
  border: 1px solid #ddd;        /* Borde gris claro */
  vertical-align: top;           /* Alineación vertical desde la parte superior */
  text-align: center;            /* Centra el contenido de cada tarjeta */
  box-shadow: 2px 2px 6px rgba(0,0,0,0.1); /* Sombra suave para efecto de elevación */
}

.product-card__img {
  width: 200px;                   /* Imagen ocupa todo el ancho de la tarjeta */
  height: 200px;                  /* Altura proporcional automática */
}

.product-card__name {
  margin: 10px 0 5px;            /* Espaciado arriba y abajo del nombre del producto */
  font-weight: bold;            /* Texto en negrita */
}

.product-card__price {
  color: #e53935;                /* Color rojo para destacar el precio */
  margin: 0 0 10px;              /* Espaciado inferior para separar del botón */
}

.product-card__btn {
  background: #000;              /* Botón con fondo negro */
  color: white;                  /* Texto blanco */
  border: none;                  /* Sin borde */
  padding: 10px 15px;            /* Espaciado interno del botón */
  cursor: pointer;              /* Cambia el cursor a mano al pasar el mouse */
}

.product-card__btn:hover {
  background: #e53935;           /* Cambia el color de fondo al pasar el mouse */
}

/* Footer */
.footer {
  background-color: #000;        /* Fondo negro para el pie de página */
  color: white;                  /* Texto blanco */
  text-align: center;            /* Centrado horizontal del texto */
  padding: 20px 10px;            /* Espaciado interno */
  margin-top: 40px;              /* Separación del contenido superior */
}

.footer__text {
  margin: 0;                     /* Sin márgenes para el texto final */
}