body {
    font-family: Arial, sans-serif; /* Fuente de letra predeterminada para el cuerpo */
    background-color: #f8f9fa; /* Color de fondo del cuerpo */
    margin: 0; /* Elimina los márgenes predeterminados del cuerpo */
    padding: 0; /* Elimina el relleno predeterminado del cuerpo */
}

/* ============================== */
    /*  Estilos Mobile-First para el encabezado  */
    /* ============================== */
    
    /* Encabezado: ocupa el ancho completo, fondo blanco y centra su contenido */
    header {
      background-color: white;    /* Fondo blanco para el encabezado */
      width: 100%;                /* Ocupa el 100% del ancho del viewport */
      padding: 0;                 /* Sin padding */
      text-align: center;         /* Centra el contenido (imagen) */
    }
    
    /* Imagen del encabezado: se adapta al 100% del ancho disponible y mantiene su proporción */
    .img-fluid {
      display: block;             /* Elimina el espacio extra debajo de la imagen */
      width: 100%;                /* La imagen siempre ocupa el 100% del ancho del contenedor */
      max-width: 100%;            /* Evita que la imagen se desborde del contenedor */
      height: auto;               /* Mantiene la proporción original de la imagen */
    }


/* 🔗 Estilos de la barra de navegación */
.navegacion {
    background-color: #eee; /* Color de fondo de la barra de navegación */
    padding: 0.5rem 0; /* Añade un relleno vertical de 0.5 rem a la navegación */
    text-align: center; /* Centra los elementos de la navegación */
}

.nav-link {
    display: inline-block; /* Permite que los enlaces se muestren en línea pero con propiedades de bloque */
    margin: 0 1rem; /* Añade un margen horizontal de 1 rem a los enlaces */
    text-decoration: none; /* Elimina el subrayado de los enlaces */
    color: #333; /* Color de texto de los enlaces */
    font-weight: bold; /* Texto de los enlaces en negrita */
    transition: color 0.3s ease; /* Transición suave para el cambio de color */
}

.nav-link:hover {
    color: #007bff; /* Cambia el color del enlace al pasar el ratón */
}

.nav-link i {
    font-size: 1.5rem; /* Tamaño de los iconos de la navegación */
    margin-right: 0.5rem; /* Añade un margen a la derecha de los iconos */
    vertical-align: middle; /* Alinea verticalmente los iconos con el texto */
    color: black; /* Color de los iconos */
    text-shadow: 1px 1px 2px rgba(128, 128, 128, 0.5); /* Sombra suave para los iconos */
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out; /* Transición para la transformación y el color */
}

.nav-link i:hover {
    transform: scale(1.1); /* Aumenta ligeramente el tamaño del icono al pasar el ratón */
    color: #555; /* Cambia el color del icono al pasar el ratón */
}

/* ======================================================================================= */
/*       ESTILOS BASE (MOBILE) PARA LAS TARJETAS DE ARTICULOS EN INDEX   */
/* ======================================================================================= */

/* Contenedor de tarjetas: diseño mobile (por defecto, en columna) */
.tarjetas-container {
  display: flex;               /* Utiliza Flexbox */
  flex-direction: column;      /* Apila las tarjetas verticalmente */
  gap: 1.5rem;                 /* Espacio entre tarjetas */
  padding: 1rem;               /* Espacio alrededor del contenedor */
}

/* Cada tarjeta: estilo mobile, 100% del ancho */
.tarjeta {
  width: 100%;                 /* Ocupa toda la fila */
  border: 1px solid #ddd;      /* Borde gris claro */
  border-radius: 0.5rem;       /* Bordes redondeados */
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Sombra sutil */
  overflow: hidden;            /* Oculta contenido desbordado */
  background-color: white;     /* Fondo blanco */
}

/* Imagen interna de la tarjeta */
.tarjeta-img {
  display: block;              /* Elimina espacio extra debajo */
  width: 100%;                 /* Completa el ancho de la tarjeta */
  height: auto;                /* Mantiene proporción */
}

/* Cuerpo de la tarjeta: contenido (título, descripción, etc.) */
.tarjeta-body {
  padding: 1rem;               /* Espaciado interno */
}

/* Título de la tarjeta (default para móvil) */
.tarjeta-title {
  font-size: 3rem;             /* Gran tamaño legible en móviles */
  font-weight: bold;           /* Título en negrita */
  margin-bottom: 0.75rem;      /* Separación inferior */
  color: #333;                 /* Color del título */
}

/* Texto descriptivo de la tarjeta (default para móvil) */
.tarjeta-text {
  font-size: 2rem;             /* Tamaño del texto */
  color: #6c757d;              /* Color gris del texto */
  margin-bottom: 0.75rem;      /* Separación inferior */
  line-height: 1.5;            /* Espaciado de líneas */
}


/* ============================= */
/*       ESTILOS BASE (MOBILE)   */
/* ============================= */

/* Contenedor de tarjetas: diseño mobile (por defecto, en columna) */
.tarjetas-container {
  display: flex;               /* Utiliza Flexbox para mostrar las tarjetas */
  flex-direction: column;      /* Apila las tarjetas verticalmente (1 por fila) */
  gap: 1.5rem;                 /* Define el espacio entre tarjetas */
  padding: 1rem;               /* Espacio alrededor del contenedor */
}

/* Cada tarjeta: Estilo base para móviles (1 por fila) */
.tarjeta {
  width: 100%;                 /* Ocupa el 100% del ancho del contenedor */
  border: 1px solid #ddd;      /* Borde gris claro */
  border-radius: 0.5rem;       /* Bordes ligeramente redondeados */
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);  /* Sombra sutil */
  overflow: hidden;            /* Oculta el contenido extra que se desborda */
  background-color: white;     /* Fondo blanco para la tarjeta */
}

/* Imagen interna de la tarjeta */
.tarjeta-img {
  display: block;              /* Elimina espacio extra debajo de la imagen */
  width: 100%;                 /* La imagen ocupa todo el ancho de la tarjeta */
  height: auto;                /* Mantiene la proporción original de la imagen */
}

/* Cuerpo de la tarjeta: Contenido (título, descripción, etc.) */
.tarjeta-body {
  padding: 1rem;               /* Espaciado interno */
}

/* Título de la tarjeta para móviles */
.tarjeta-title {
  font-size: 3rem;             /* Tamaño grande legible en móviles */
  font-weight: bold;           /* Negrita */
  margin-bottom: 0.75rem;      /* Espacio inferior */
  color: #333;                 /* Color del texto */
}

/* Texto descriptivo para móviles */
.tarjeta-text {
  font-size: 2rem;             /* Tamaño del texto para móviles */
  color: #6c757d;              /* Color gris para el texto */
  margin-bottom: 0.75rem;      /* Espacio inferior */
  line-height: 1.5;            /* Altura de línea para una mejor legibilidad */
}

/* ============================= */
/*       ESTILOS BASE (MOBILE)   */
/* ============================= */

/* Contenedor de tarjetas en móviles: 1 tarjeta por fila */
.tarjetas-container {
  display: flex;               /* Utiliza Flexbox */
  flex-direction: column;      /* Apila las tarjetas verticalmente */
  gap: 1.5rem;                 /* Espacio entre tarjetas */
  padding: 1rem;               /* Espacio alrededor del contenedor */
}

/* Cada tarjeta: ocupa el 100% del ancho en móviles */
.tarjeta {
  width: 100%;                 /* 1 tarjeta por fila */
  border: 1px solid #ddd;      /* Borde gris claro */
  border-radius: 0.5rem;       /* Bordes redondeados */
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);  /* Sombra sutil */
  overflow: hidden;            /* Oculta contenido que se desborda */
  background-color: white;     /* Fondo blanco */
}

/* Imagen interna de la tarjeta */
.tarjeta-img {
    display: block; /* Elimina espacios extra */
    width: 100%;    /* Completa el ancho de la tarjeta */
    height: 200px;   /* Establece una altura fija */
    object-fit: contain; /* Escala la imagen para que quepa dentro del contenedor, manteniendo su proporción */
}

/* Cuerpo de la tarjeta */
.tarjeta-body {
  padding: 1rem;               /* Espaciado interno */
}

/* Título de la tarjeta (móviles) */
.tarjeta-title {
  font-size: 1.5rem;             /* Tamaño grande para móviles */
  font-weight: bold;           /* Negrita */
  margin-bottom: 0.75rem;      /* Separación inferior */
  color: #333;                 /* Color del título */
}

/* Texto descriptivo de la tarjeta (móviles) */
.tarjeta-text {
  font-size: 1rem;             /* Tamaño del texto en móviles */
  color: #6c757d;              /* Color gris del texto */
  margin-bottom: 0.75rem;      /* Separación inferior */
  line-height: 1.5;            /* Altura de línea */
}

/* ============================= */
/*        ESTILOS PARA TABLETAS  */
/* ============================= */

/* Pantallas medianas: de 768px a 1023px (2 tarjetas por fila) */
@media (min-width: 768px) and (max-width: 1023px) {
  .tarjetas-container {
    flex-direction: row;       /* Dispone las tarjetas en fila */
    flex-wrap: wrap;           /* Permite el salto de línea para las filas */
    justify-content: center;   /* Centra las tarjetas en cada fila */
  }
  .tarjeta {
    flex: 1 1 calc(50% - 1.5rem);  /* Calcula el ancho para 2 tarjetas por fila */
  }
}

/* ============================= */
/*   ESTILOS PARA LAPTOP/DESKTOP */
/* ============================= */

/* Pantallas grandes: de 1024px en adelante (5 tarjetas por fila)
   Además se reducen los tamaños de fuente para que no se vean desproporcionados */
@media (min-width: 1024px) {
  .tarjetas-container {
    flex-direction: row;          /* Muestra las tarjetas en filas */
    flex-wrap: wrap;              /* Permite múltiples filas */
    justify-content: flex-start;  /* Alinea las tarjetas al inicio */
  }
  .tarjeta {
    flex: 1 1 calc(20% - 1.5rem);  /* Calcula el ancho para 5 tarjetas por fila */
    max-width: 250px;              /* Fija un ancho máximo uniforme */
  }
  /* Reducir el tamaño de fuente en pantallas grandes */
  .tarjeta-title {
    font-size: 1.5rem !important;  /* Tamaño más pequeño para el título */
  }
  .tarjeta-text {
    font-size: 1rem !important;    /* Tamaño más pequeño para el texto */
  }
}

/*=======================================================================================*/
/*=======================================================================================*/
/* 🛒 Estilos para el formulario del carrito dentro de la tarjeta */
.form-carrito {
    display: flex; /* Utiliza Flexbox para la disposición de los elementos del formulario */
    gap: 0.5rem; /* Espacio entre los elementos del formulario */
    align-items: center; /* Alinea verticalmente los elementos del formulario */
}

.form-group {
    flex-grow: 1; /* Permite que el input crezca para ocupar el espacio disponible */
}

.form-control-sm {
    width: 60px; /* Ancho fijo para el input de cantidad */
    padding: 0.375rem 0.75rem; /* Relleno pequeño para el input */
    font-size: 0.875rem; /* Tamaño de la fuente del input */
    line-height: 1.5; /* Espaciado entre líneas del input */
    border-radius: 0.2rem; /* Bordes ligeramente redondeados del input */
    border: 1px solid #ced4da; /* Borde estándar del input */
}

/* 🎯 Estilo para el botón de añadir al carrito */
.btn-carrito {
    background-color: #007bff; /* Color de fondo inicial del botón */
    color: white; /* Color del texto del botón */
    padding: 0.5rem 1rem; /* Relleno del botón */
    border-radius: 0.25rem; /* Bordes ligeramente redondeados del botón */
    cursor: pointer; /* Cambia el cursor al pasar por encima */
    border: none; /* Elimina el borde predeterminado del botón */
    font-size: 2rem; /* Tamaño de la fuente del botón */
    transition: background-color 0.2s ease-in-out; /* Transición suave para el cambio de color de fondo */
    background-color: #f35b04 !important; /* **Color del botón de añadir al carrito (¡Importante para sobreescribir)** */
    outline: none !important; /* **Elimina el contorno azul al enfocar el botón** */
}

.btn-carrito:hover {
    background-color: #d84a02 !important; /* **Color del botón al pasar el ratón** */
}

/* 🛒 Estilos para la lista del carrito (inicialmente oculta) */
#listaCarrito {
    display: none; /* Oculta la lista del carrito por defecto */
    position: fixed; /* Fija la posición del carrito en la pantalla */
    bottom: 80px; /* Distancia desde la parte inferior de la ventana */
    right: 20px; /* Distancia desde la parte derecha de la ventana */
    background: white; /* Color de fondo del carrito */
    border: 1px solid #ddd; /* Borde gris claro */
    padding: 1rem; /* Espacio dentro del carrito */
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* Sombra suave */
    width: 280px; /* Ancho del carrito */
    border-radius: 0.25rem; /* Bordes ligeramente redondeados */
    z-index: 1000; /* Asegura que el carrito esté por encima de otros elementos */
}

/* Muestra la lista del carrito al pasar el ratón sobre el botón del carrito */
#botonCarrito:hover + #listaCarrito {
    display: block; /* Muestra la lista del carrito */
}

/* Estilos para el botón principal (puede ser el botón de añadir al carrito en otro contexto) */
.btn-primary {
    background-color: #f35b04; /* Color de fondo personalizado */
    color: white; /* Color del texto */
    padding: 0.5rem 1rem; /* Relleno */
    border-radius: 0.25rem; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor */
    transition: background-color 0.3s ease-in-out; /* Transición suave para el color de fondo */
    border: none; /* Elimina el borde */
    font-size: 0.875rem; /* Tamaño de la fuente */
}

.btn-primary:hover {
    background-color: #d84a02; /* Color de fondo más oscuro al pasar el ratón */
}

/* Estilos para el botón de advertencia (puede tener un uso específico) */
.btn-warning {
    background-color: #f35b04; /* Color de fondo personalizado */
    border: none; /* Elimina el borde */
    color: white; /* Color del texto */
    padding: 0.5rem 1rem; /* Relleno */
    border-radius: 0.25rem; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor */
    font-size: 0.875rem; /* Tamaño de la fuente */
    transition: background-color 0.3s ease-in-out; /* Transición suave para el color de fondo */
}

.btn-warning:hover {
    background-color: #d84a02; /* Color de fondo más oscuro al pasar el ratón */
}

/* Estilos para el botón del carrito flotante */
#botonCarrito {
    position: fixed; /* Fija la posición del botón en la pantalla */
    bottom: 20px; /* Distancia desde la parte inferior */
    right: 20px; /* Distancia desde la parte derecha */
    background-color: #F35B04; /* Color de fondo personalizado */
    color: white; /* Color del texto */
    padding: 1rem; /* Relleno */
    border-radius: 50%; /* Forma circular */
    font-size: 1.25rem; /* Tamaño de la fuente */
    text-align: center; /* Centra el texto */
    cursor: pointer; /* Cambia el cursor */
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* Sombra suave */
    z-index: 1001; /* Asegura que esté por encima de otros elementos */
    border: none; /* Elimina el borde */
    transition: background-color 0.2s ease-in-out; /* Transición suave para el color de fondo */
}

#botonCarrito:hover {
    background-color: #d9480f; /* Color de fondo más oscuro al pasar el ratón */
}

/* ============================ */
/* Botón "Añadir al Carrito"  */
/* Estilos Mobile‑First       */
/* ============================ */

/* Estilos base (por defecto para móviles) */
.btn-carrito {
    background-color: #f35b04; /* Fondo anaranjado fuerte */
    color: #fff;               /* Texto en blanco */
    border: none;              /* Sin borde */
    font-size: 1rem;         /* Tamaño de fuente adecuado para móviles */
    padding: 5px 10px;        /* Relleno interno para un botón cómodo en móviles */
    border-radius: 0.5rem;     /* Bordes ligeramente redondeados */
    cursor: pointer;           /* Cambia el cursor al pasar el mouse */
    transition: background-color 0.3s ease; /* Transición suave en hover */
}

/* Efecto hover para móviles */
.btn-carrito:hover {
    background-color: #e04a03; /* Fondo ligeramente más oscuro al pasar el cursor */
}

/* ============================ */
/* Estilos para pantallas grandes (Laptop/Desktop) */
/* ============================ */
@media (min-width: 1024px) {
    .btn-carrito {
        white-space: nowrap; /* Evita el salto de línea */
        font-size: 1rem !important;     /* Se reduce el tamaño de fuente para pantallas grandes */
        padding: 10px 15px !important;     /* Se reduce el padding para mantener proporciones adecuadas */
    }
}
/*==================================================================================================================================================*/
/* 🦶 Diseño del pie de página (Footer) */
.site-footer {
    background-color: #f35b04; /* **Color de fondo del footer** */
    color: #fff; /* Color del texto del pie de página (inicial) */
    padding: 2rem 0; /* Espacio vertical dentro del pie de página */
    margin-top: 2rem; /* Espacio superior para separarlo del contenido principal */
}

.footer-content {
    display: grid; /* Utiliza Grid para la disposición del contenido del pie de página */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Crea columnas que se ajustan al contenido */
    gap: 1.5rem; /* Espacio entre las columnas */
    padding: 0 1rem; /* Espacio lateral dentro del contenedor del pie de página */
    max-width: 1200px; /* Ancho máximo del contenido del pie de página */
    margin: 0 auto; /* Centra el contenido del pie de página */
}

.footer-section {
    margin-bottom: 1rem; /* Espacio inferior para cada sección del pie de página */
}

.footer-section h3 {
    color: black; /* **Texto grande en negro** */
    margin-bottom: 0.75rem; /* Espacio debajo del título */
    text-shadow: 1px 1px 2px #888; /* **Sombra gris para el texto grande** */
}

.footer-section h4 {
    color: #FFFFFFF; /* **Texto pequeño en gris** */
    margin-bottom: 0.5rem; /* Espacio debajo del subtítulo */
    text-shadow: 1px 1px 8px #F35B04; /* **Sombra gris para el texto grande** */
    font-size: 1rem !important; 
    font-style: italic;
    text-decoration-style:dashed;
}

.footer-section p,
.footer-section ul,
.footer-section a {
    color: #6c757d; /* **Texto pequeño en gris** */
    text-decoration: none; /* Elimina el subrayado de los enlaces */
    line-height: 1.6; /* Espaciado entre líneas */
}

.footer-section ul {
    list-style: none; /* Elimina los puntos de la lista */
    padding: 0; /* Elimina el relleno predeterminado de la lista */
}

.footer-section li {
    margin-bottom: 0.5rem; /* Espacio debajo de cada elemento de la lista */
}

.footer-bottom {
    background-color: #f35b04; /* **Color de fondo del footer** */
    color:white;
    text-shadow: 1px 1px 2px #000000; /* **Sombra gris para el texto grande** */
    padding: 2rem 0; /* Espacio vertical dentro del pie de página */
    margin-top: 2rem; /* Espacio superior para separarlo del contenido principal */
    text-align: center;
}

.footer-section.social a {
    font-size: 1.5em; /* Tamaño de los iconos sociales (sin cambios especificados) */
    margin-right: 0.75rem; /* Espacio a la derecha de los iconos sociales (sin cambios especificados) */
    color: #fff; /* Color de los iconos sociales (sin cambios especificados) */
    transition: color 0.3s ease; /* Trans*/
    }
    
/* Estilos para el botón de regresar (puedes moverlos a tu archivo estilos.css) */

.boton-regresar {
            display: inline-block;
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            text-decoration: none;
            border-radius: 0.5rem;
            transition: background-color 0.3s ease;
        }
        .boton-regresar:hover {
            background-color: #0056b3;
        }