/* Estilo de fuente personalizada */
@font-face {
    font-family: 'Super Bakery';
    src: url('fonts/SuperBakery.ttf') format('truetype'); /* o woff/woff2 si tienes esos formatos */
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');


/* Estilo para eliminar los márgenes y el relleno predeterminados de todos los elementos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Asegura que el relleno y el borde estén dentro del ancho/alto del elemento */
}

/* Estilo general para el cuerpo de la página */
body {
    background-image: url('images/Background.png'); /* imagen de fondo */
    background-size: cover; /* La imagen cubrirá todo el fondo */
    background-position: center center; /* La imagen estará centrada */
    background-attachment: fixed; /* Hace que el fondo no se desplace al hacer scroll */
    background-repeat: no-repeat; /* La imagen no se repetirá */
    margin: 0; /* Elimina el margen del body para evitar espacios */
    padding: 0; /* Elimina el padding del body para evitar espacios */
    font-family: 'Poppins', sans-serif; /* Fuente predeterminada para todo el sitio */
}

/* Estilos para el encabezado */
header {
    position: fixed; /* El header será fijo */
    top: 0; /* Pegado en la parte superior */
    left: 0;
    width: 100%; /* Ocupa todo el ancho de la pantalla */
    display: flex; /* Flexbox para organizar el contenido en una fila */
    justify-content: space-between; /* Espaciado igual entre los elementos */
    align-items: center; /* Centra verticalmente los elementos en la misma fila */
    padding: 10px 20px; /* Añade un margen interior al header */
    background-color: #A373E5; /* Color de fondo del header */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Añade una sombra sutil al header */
    z-index: 1000; /* Para asegurarse de que esté por encima de otros elementos */
}

/* Estilo para la sección del logo */
.logo img {
    height: 50px; /* Define la altura del logo */
    
}

/* Estilos para la lista de navegación */
nav ul {
    display: flex; /* Flexbox para alinear los enlaces en una fila */
    list-style: none; /* Elimina los puntos de las listas */
}

/* Estilo para cada ítem de la lista de navegación */
nav ul li {
    margin: 0 10px; /* Añade espacio entre cada enlace de navegación */
}

/* Estilo para los enlaces de navegación */
nav ul li a {
    text-decoration: none; /* Elimina el subrayado en los enlaces */
    font-weight: bold; /* Texto en negrita */
    color: #ffffff; /* Color de texto blanco */
    font-size: 14px; /* Tamaño de la fuente */
}

/* Efecto al pasar el ratón sobre los enlaces de navegación */
nav ul li a:hover {
    color: #007bff; /* Cambia el color a azul cuando se pasa el cursor */
}

/* Estilos para la sección de íconos */
.icons {
    display: flex; /* Flexbox para organizar los íconos en una fila */
    align-items: center; /* Centra los íconos verticalmente */
}

/* Estilos generales para los íconos */
.icons a {
    margin-left: 20px; /* Espaciado entre los íconos */
    text-decoration: none; /* Elimina el subrayado */
    position: relative; /* Para poder posicionar el contador dentro del ícono */
}

/* Estilo para las imágenes de los íconos */
.icons a img.icon {
    width: 24px; /* Tamaño de los íconos */
    height: 24px; /* Asegura que las imágenes sean cuadradas */
}

/* Estilos para el contador de notificaciones (número sobre el ícono de deseos y carrito) */
.icons a span {
    background-color: #007bff; /* Fondo azul para el contador */
    color: #fff; /* Texto blanco para el contador */
    border-radius: 50%; /* Bordes redondeados para hacer un círculo */
    padding: 2px 6px; /* Relleno interno para el contador */
    font-size: 12px; /* Tamaño del texto del contador */
    position: absolute; /* Posiciona el contador sobre el ícono */
    top: -10px; /* Posición vertical del contador (10px arriba del ícono) */
    right: -10px; /* Posición horizontal del contador (10px a la derecha del ícono) */
}

/* Estilo general para el contenedor principal (main) */
main {
    padding: 20px; /* Añade espacio alrededor del contenido */
    background-color: #f9f9f9a1; /* Fondo claro para contrastar con el header */
    border-radius: 10px; /* Bordes redondeados para darle un toque suave */
    max-width: 1200px; /* Limita el ancho del contenido */
    margin: 0 auto; /* Centra el contenido horizontalmente */
}
main h1{
    font-family: 'super bakery';
    font-size: 50px; /* Tamaño del título */
    color: #2B193D; /* Color del texto */
    margin: 10px 0; /* Espacio superior e inferior */
}
/* Estilo para la sección de "hero" o portada */
.hero {
    display: flex; /* Flexbox para alinear los elementos en fila */
    justify-content: space-between; /* Espacia los elementos de manera uniforme */
    align-items: center; /* Alinea verticalmente los elementos */
    background-color: #a273e5a7; /* Color de fondo de la sección */
    padding: 20px; /* Añade espacio alrededor del contenido */
    border-radius: 10px; /* Bordes redondeados para darle un toque suave */
}

/* Estilos para las imágenes dentro del hero */
.hero-images .circle {
    border-radius: 10%; /* Hace que las imágenes sean circulares */
    width: 250px; /* Tamaño de las imágenes circulares */
    height: 120px; /* Asegura que las imágenes sean cuadradas */
    object-fit: cover; /* Asegura que la imagen se ajuste bien al contenedor circular */
    margin: 10px; /* Espacio entre las imágenes */
}

/* Estilos para los títulos y textos dentro del hero */
.hero-content h1 {
    font-family: 'super bakery';
    font-size: 36px; /* Tamaño grande para el título principal */
    color: #ffffff; /* Color del texto */
    margin-bottom: 10px; /* Espacio debajo del título */
}

.hero-content p {
    font-size: 18px; /* Tamaño más pequeño para la descripción */
    color: #e6e4e4; /* Color gris para el texto */
}
.productos h2{
    font-family: 'super bakery';
    font-size: 20px; /* Tamaño del título de la categoría */
    color: #2B193D; /* Color azul para el título */
    margin-bottom: 10px; /* Espacio debajo del título */
}
/* Estilo para las categorías de productos */
.categorias {
    display: grid; /* Usa grid layout para organizar las categorías */
    grid-template-columns: repeat(3, 1fr); /* Tres columnas iguales */
    gap: 20px; /* Espacio entre las categorías */
    margin-top: 40px; /* Espacio superior para separar la sección del contenido anterior */
}

.categoria {
    background-color: #ffffff14; /* Fondo blanco para cada categoría */
    padding: 20px; /* Espaciado interno */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Añade una sombra para dar profundidad */
    border-radius: 10px; /* Bordes redondeados */
}

.categoria h3 {
    font-family: 'super bakery';
    font-size: 20px; /* Tamaño del título de la categoría */
    color: #2B193D; /* Color azul para el título */
    margin-bottom: 10px; /* Espacio debajo del título */
}

.categoria-content {
    display: flex; /* Usa Flexbox para alinear el texto y la imagen en una fila */
    justify-content: space-between; /* Espaciado entre el texto y la imagen */
    align-items: center; /* Centra verticalmente el contenido */
}

.categoria-content p {
    flex: 1; /* El texto ocupará el mayor espacio posible */
    margin-right: 10px; /* Espaciado entre el texto y la imagen */
}

.categoria-img {
    width: 110px; /* Ajusta el tamaño de la imagen */
    height: 110px; /* Mantiene la proporción de la imagen */
    border-radius: 5px; /* Bordes ligeramente redondeados */
    border: 2px solid #A373E5; /* Borde de 2px, sólido, color claro */
    transition: transform 0.5s ease; /* Transición suave cuando el tamaño cambia */
}
.categoria img:hover {
    transform: scale(1.5); /* Escala la imagen al 110% de su tamaño original al pasar el mouse */
}

.categoria p {
    font-size: 14px; /* Tamaño del texto para la descripción */
    color: #333; /* Color del texto */
}


/* Estilos generales para el pie de página */
footer {
    background-color: #2B193D; /* Color de fondo oscuro para el pie de página */    
    color: #fff; /* Color de texto blanco */
    padding: 20px 0; /* Añade relleno interno arriba y abajo del pie de página */
}

/* Estilos para el contenedor principal del pie de página */
.footer-container {
    display: flex; /* Utiliza Flexbox para alinear las columnas en una fila */
    justify-content: space-between; /* Espacia las columnas uniformemente */
    max-width: 1200px; /* Define el ancho máximo del pie de página */
    margin: 0 auto; /* Centra el contenido horizontalmente */
    padding: 0 20px; /* Añade relleno interno a los lados */
}

/* Estilos para cada columna del pie de página */
.footer-column {
    flex: 1; /* Asigna a cada columna un espacio igual */
    padding: 0 20px; /* Añade relleno interno en los lados de cada columna */
}

/* Estilos para el logo del pie de página */
.footer-logo {
    width: 150px; /* Define el ancho del logo */
    margin-bottom: 20px; /* Añade espacio debajo del logo */
}

/* Estilos para los iconos de redes sociales */
.social-icons a {
    margin-right: 10px; /* Espacio entre los iconos */
}

/* Estilos para las imágenes de los iconos sociales */
.social-icons img {
    width: 30px; /* Define el tamaño de los iconos de redes sociales */
    height: auto; /* Mantiene la proporción de las imágenes */
}

/* Estilos para los títulos de las columnas */
.footer-column h3 {
    font-size: 18px; /* Tamaño del texto para los títulos */
    margin-bottom: 15px; /* Añade espacio debajo del título */
}

/* Estilos para la lista de servicios y contacto */
.footer-column ul {
    list-style: none; /* Elimina los puntos de la lista */
    padding: 0; /* Elimina el relleno de la lista */
}

/* Estilos para los ítems de la lista */
.footer-column ul li {
    margin-bottom: 10px; /* Añade espacio debajo de cada ítem */
}

/* Estilos para los enlaces de la lista */
.footer-column ul li a {
    color: #fff; /* Color de los enlaces de texto */
    text-decoration: none; /* Elimina el subrayado en los enlaces */
}

/* Estilo para los iconos dentro de la lista de contacto */
.contact-list img {
    width: 20px; /* Tamaño de los iconos de contacto */
    margin-right: 10px; /* Espacio entre el icono y el texto */
    vertical-align: middle; /* Alinea el icono verticalmente con el texto */
}

/* Estilo del ícono de WhatsApp en la parte inferior derecha */
.whatsapp-icon {
    position: fixed; /* El icono será fijo */
    bottom: 20px; /* A 20px del borde inferior */
    right: 20px; /* A 20px del borde derecho */
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
}

.whatsapp-icon img {
    width: 50px; /* Tamaño del ícono */
    height: 50px;
}
/* Estilo para la pagina MUGS */
/* Estilo del contenedor de productos */
.productos {
    display: flex; /* Flexbox para organizar los productos en fila */
    grid-template-columns: repeat(3, 1fr); /* Tres columnas iguales */
    justify-content: space-around; /* Espaciado uniforme entre los productos */
    flex-wrap: wrap; /* Permite que los productos se ajusten en diferentes filas si es necesario */
}

/* Estilo general para cada producto */
.producto {
    background-color: #ffffff27; /* Fondo blanco para cada producto */
    padding: 10px; /* Espaciado interno del contenedor */
    border-radius: 5px; /* Bordes redondeados */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil para dar profundidad */
    text-align: center; /* Centra el contenido de los productos */
    margin: 5px; /* Espaciado alrededor de cada producto */
    width: 350px; /* Ancho fijo para cada tarjeta de producto */
}

/* Estilo para las imágenes de los productos */
.producto img {
    width: 260px; /* Ajusta el tamaño de la imagen */
    height: auto; /* Mantiene la proporción de la imagen */
    border-radius: 5px; /* Bordes ligeramente redondeados */
    border: 2px solid #A373E5; /* Borde de 2px, sólido, color claro */
    transition: transform 0.5s ease; /* Transición suave cuando el tamaño cambia */
}
.producto img:hover {
    transform: scale(1.5); /* Escala la imagen al 110% de su tamaño original al pasar el mouse */
}
/* Estilo para los títulos de los productos */
.producto h2 {
    font-size: 20px; /* Tamaño del título */
    color: #2B193D; /* Color del texto */
    margin: 10px 0; /* Espacio superior e inferior */
}

/* Estilo para los precios */
.producto p {
    font-size: 18px; /* Tamaño del texto */
    color: #A373E5; /* Color para destacar el precio */
}

/* Estilo para las listas de precios por cantidad */
.producto ul {
    list-style: none; /* Elimina los puntos de la lista */
    padding: 0; /* Elimina el padding de la lista */
    margin-top: 10px; /* Espaciado superior */
}

/* Estilo para cada ítem en la lista de precios */
.producto ul li {
    font-size: 14px; /* Tamaño del texto */
    color: #333; /* Color de texto oscuro */
    margin-bottom: 5px; /* Espaciado debajo de cada ítem */
}
/* Estilos para la sección de suscripción */

/* Sección completa que contiene todo el bloque */
.subscribe-section {
    background-color: #2b193dc0; /* Color suave de fondo */
    padding: 20px 0; /* Espaciado arriba y abajo */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  
  /* Contenedor que centraliza y ajusta los elementos dentro */
  .subscribe-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #a273e5a1; /* Fondo blanco para el formulario */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para darle relieve */
    padding: 15px;
    max-width: 1200px;
    width: 100%;
    margin: 0 20px;
  }
  
  /* Texto de la izquierda con el icono */
  .subscribe-text {
    display: flex;
    align-items: center;
    font-family: 'Poppins', sans-serif; /* Tipografía Poppins */
    font-size: 18px;
    color: #2b193d90; /* Color del texto */
  }
  
  .subscribe-text i {
    font-size: 24px;
    color: #2b193dc0; /* Color para el ícono */
    margin-right: 10px;
  }
  
  /* Contenedor del formulario */
  .subscribe-form {
    display: flex;
    align-items: center;
    width: 50%;
  }
  
  /* Estilo del input de correo */
  .subscribe-form input {
    padding: 10px 15px;
    border: 1px solid #ccc; /* Borde gris claro */
    border-radius: 5px 0 0 5px; /* Bordes redondeados solo en la izquierda */
    font-size: 16px;
    width: 100%;
  }
  
  /* Estilo del botón de suscripción */
  .subscribe-btn {
    background-color: #2b193dc0; /* Color del boton */
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 0 5px 5px 0; /* Bordes redondeados solo en la derecha */
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  /* Efecto hover para el botón */
  .subscribe-btn:hover {
    background-color: #0056b3; /* Un tono más oscuro al pasar el ratón */
  }

/* Estilo principal para la sección de contacto */
.contact-section {
    display: flex; /* Coloca la información de contacto y el formulario uno al lado del otro */
    justify-content: space-between; /* Espacio entre ambas secciones */
    padding: 20px; /* Espaciado interno de la sección */
    background-color: #f8f8f82c; /* Color de fondo claro */
    border-radius: 10px; /* Bordes redondeados */
  }
  
  /* Estilo para la sección de información de contacto */
  .contact-info {
    width: 45%; /* Ocupa el 45% del ancho del contenedor */
  }
  
  /* Estilo para el título de la información de contacto */
  .contact-info h2 {
    font-size: 1.5em; /* Tamaño de la fuente para el título */
    font-family: 'Poppins', sans-serif;
    color: #2b193dc0; /* Color oscuro para el texto */
  }
  
  /* Estilo para el párrafo descriptivo */
  .contact-info p {
    font-size: 1em; /* Tamaño de fuente normal */
    font-family: 'Poppins', sans-serif;
    color: #2b193dc0; /* Color más claro para el texto descriptivo */
    margin-bottom: 20px; /* Margen inferior para separar el texto de la lista */
  }
  
  /* Elimina el estilo por defecto de la lista */
  .contact-info ul {
    list-style: none; /* Quita los viñetas de la lista */
    padding: 0; /* Sin relleno interno */
  }
  
  /* Estilo para cada ítem de la lista de contacto */
  .contact-info li {
    margin-bottom: 10px; /* Espaciado inferior entre ítems */
    font-size: 1em; /* Tamaño de fuente normal */
    font-family: 'Poppins', sans-serif;
    color: #333; /* Color oscuro para el texto */
  }
  
  /* Estilo para los íconos */
  .contact-info i {
    margin-right: 10px; /* Espacio a la derecha de los íconos */
    color: #2b193dc0; /* Color azul para los íconos */
  }
  
  /* Estilo para la sección del formulario */
  .contact-form {
    width: 45%; /* Ocupa el 45% del ancho del contenedor */
  }
  
  /* Estilo para el título del formulario */
  .contact-form h2 {
    font-size: 1.5em; /* Tamaño de la fuente para el título */
    font-family: 'Poppins', sans-serif;
    color: #2b193dc0; /* Color oscuro para el texto */
  }
  
  /* Estilo para los grupos de campos del formulario */
  .form-group {
    margin-bottom: 15px; /* Espaciado inferior entre los campos */
  }
  
  /* Estilo para las etiquetas de los campos */
  .form-group label {
    display: block; /* Hace que la etiqueta ocupe toda la línea */
    margin-bottom: 5px; /* Espacio inferior entre la etiqueta y el input */
    font-size: 1em; /* Tamaño de fuente normal */
    font-family: 'Poppins', sans-serif;
    color: #2b193dc0; /* Color oscuro para las etiquetas */
  }
  
  /* Estilo para los campos de texto y área de texto */
  .form-group input,
  .form-group textarea {
    width: 100%; /* Los campos ocupan todo el ancho del contenedor */
    padding: 10px; /* Espaciado interno en los campos */
    border: 1px solid #ccc; /* Borde gris claro */
    border-radius: 4px; /* Bordes ligeramente redondeados */
    font-size: 1em; /* Tamaño de fuente normal */
  }
  
  /* Estilo para el botón de envío */
  button[type="submit"] {
    background-color: #2b193dc0; /* Color de fondo azul */
    color: #fff; /* Color de texto blanco */
    padding: 10px 20px; /* Relleno interno en el botón */
    border: none; /* Sin borde */
    border-radius: 4px; /* Bordes redondeados */
    cursor: pointer; /* Cursor de mano al pasar sobre el botón */
    font-size: 1em; /* Tamaño de fuente normal */
    font-family: 'Poppins', sans-serif;
  }
  
  /* Estilo para el botón al hacer hover (pasar el mouse encima) */
  button[type="submit"]:hover {
    background-color: #003d80; /* Color más oscuro al pasar sobre el botón */
  }

  /* Estilos para el mensaje de error */
#error-message {
    color: red;                /* Color del texto */
    font-weight: bold;        /* Texto en negrita */
    display: none;            /* Ocultar inicialmente */
    margin-top: 10px;        /* Espacio superior */
}

/* Estilos para formularios (opcional) */
form {
    margin: 20px 0;          /* Espaciado del formulario */
}

/* Estilos para los inputs (opcional) */
input[type="text"], input[type="email"], textarea {
    width: 100%;             /* Ancho completo */
    padding: 10px;          /* Espaciado interno */
    margin: 5px 0;          /* Espaciado superior e inferior */
    border: 1px solid #ccc; /* Borde gris claro */
    border-radius: 5px;     /* Bordes redondeados */
}

/* Estilos para los botones (opcional) */
button {
    background-color: #4CAF50; /* Color de fondo */
    color: white;              /* Color del texto */
    padding: 10px 15px;       /* Espaciado interno */
    border: none;              /* Sin borde */
    border-radius: 5px;       /* Bordes redondeados */
    cursor: pointer;           /* Cursor de mano al pasar por encima */
}

button:hover {
    background-color: #45a049; /* Color de fondo al pasar el ratón */
}