/* Importamos las fuentes desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700&family=Open+Sans&display=swap');

/* Estilos generales del body */
body {
  margin: 0; /* Quitamos el margen predeterminado */
  font-family: 'Open Sans', sans-serif; /* Fuente base para todo el texto */
}

/* Estilos para el header (barra superior) */
.header {
  display: flex; /* Usamos flexbox para alinear elementos horizontalmente */
  justify-content: space-between; /* Separar logo, menú e iconos */
  align-items: center; /* Centrar verticalmente */
  padding: 10px 30px; /* Espaciado interno */
  background-color: #1d6abd; /* Fondo gris claro */
}

/* Logo de la tienda */
.logo img {
  height: 50px; /* Altura fija para el logo */
}

/* Menú de navegación */
.menu ul {
  list-style: none; /* Quitamos los puntos de la lista */
  display: flex; /* Lista horizontal */
  gap: 20px; /* Separación entre elementos */
  padding: 0; /* Sin padding */
  margin: 0; /* Sin margen */
}

/* Enlaces del menú */
.menu a {
  text-decoration: none; /* Quitamos subrayado */
  color: #333; /* Color gris oscuro */
  font-weight: bold; /* Texto en negrita */
}

/* Iconos de chat y mapa */
.iconos img {
  height: 30px; /* Tamaño uniforme */
  margin-left: 10px; /* Separación entre íconos */
}

/* Contenedor principal del contenido */
.contenido {
  max-width: 1200px; /* Máximo ancho para centrar contenido */
  margin: 0 auto; /* Centramos horizontalmente */
  padding: 20px; /* Espaciado interno */
}

/* Fila para colocar columnas lado a lado */
.fila {
  display: flex; /* Flexbox para filas */
  flex-wrap: wrap; /* Que se ajuste en móviles */
  gap: 20px; /* Separación entre columnas */
  margin-top: 20px; /* Espacio arriba */
}

/* Cada columna dentro de fila */
.columna {
  flex: 1; /* Ocupa el mismo espacio */
  text-align: center; /* Centramos texto e imágenes */
}

/* Título principal de ofertas */
.titulo-ofertas {
  font-family: 'Raleway', sans-serif; /* Fuente estilizada para títulos */
  font-size: 2rem; /* Tamaño grande */
  text-align: center; /* Centramos */
  color: #2e7d32; /* Verde oscuro */
}

/* Subtítulo debajo del título */
.subtitulo-ofertas {
  text-align: center; /* Centramos texto */
  font-size: 1rem; /* Tamaño estándar */
}

/* Enlace dentro del subtítulo */
.enlace-boletin {
  color: #1976d2; /* Azul llamativo */
  text-decoration: underline; /* Subrayado para indicar enlace */
}

/* Botón para compra por chat */
.boton-chat {
  background-color: #2e7d32; /* Verde oscuro */
  color: white; /* Texto blanco */
  padding: 10px 15px; /* Espaciado interno */
  border-radius: 5px; /* Bordes redondeados */
  text-decoration: none; /* Sin subrayado */
  font-weight: bold; /* Texto negrita */
  transition: background-color 0.3s; /* Transición suave para hover */
}

/* Hover del botón para cambio de color */
.boton-chat:hover {
  background-color: #1b5e20; /* Verde más oscuro */
}

/* Columna derecha (imagen + texto) */
.columna.derecha {
  display: flex; /* Flexbox vertical */
  flex-direction: column; /* Apilar verticalmente */
  align-items: center; /* Centramos horizontalmente */
  text-align: center; /* Centramos texto */
}

/* Imagen dentro de columna derecha */
.columna.derecha img {
  max-width: 100%; /* Que no se salga del contenedor */
  height: auto; /* Mantener proporción */
  margin-bottom: 10px; /* Espacio abajo para texto */
}

.columna.izquierda {
  text-align: left; /* Alineamos texto a la izquierda */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.titulo-ofertas {
  text-align: left; /* Aseguramos que el título también quede a la izquierda */
}

.subtitulo-ofertas {
  text-align: left; /* Igual para el subtítulo */
  margin-top: 0;
}
/* Contenedor de imagen + botón en la columna derecha */
.chat-contenido {
  display: flex; /* Coloca los elementos en fila */
  align-items: flex-start; /* Alinea los elementos en la parte superior */
  gap: 20px; /* Espacio entre la imagen y el botón */
  justify-content: center; /* Centrado horizontal dentro de la columna */
}

/* Imagen del chat */
.chat-contenido img {
  height: 100px; /* Ajusta la altura como desees */
  width: auto;
}

/* Botón ya tiene sus estilos anteriores */

/* Contenedor general */
.menu-recetas {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 30px;
}

/* Contenedor flex de columnas */
.menu-flex {
  display: flex;
  flex-wrap: wrap;
}

/* Columna 3/4 y 1/4 para desktop */
.columna.tres-cuartos {
  flex: 3;
  padding-right: 20px;
}

.columna.un-cuarto {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Imagen */
.columna.un-cuarto img {
  max-width: 100%;
  height: auto;
}

/* Título y subtítulo */
.titulo-menu {
  font-family: 'Raleway', sans-serif;
  font-size: 1.8rem;
  color: #4e342e;
  margin-bottom: 10px;
}

.subtitulo-menu {
  font-size: 1rem;
  color: #555;
}

/* 📱 Responsive para móvil */
@media (max-width: 768px) {
  .menu-flex {
    flex-direction: column-reverse; /* 🔁 Invierte el orden: imagen arriba, texto abajo */
  }

  .columna.tres-cuartos,
  .columna.un-cuarto {
    flex: 1 1 100%;
    padding: 10px 0;
  }

  .titulo-menu {
    font-size: 1.4rem;
    text-align: center;
  }

  .subtitulo-menu {
    text-align: center;
  }
}

.menu-recetas {
  max-width: 1400px;
  width: 90%;
  margin: 40px auto;
  padding: 0 20px;
}

.menu-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.columna {
  box-sizing: border-box;
  padding: 10px;
}

.dos-sextos {
  flex: 0 0 33.33%;
}

.cuatro-sextos {
  flex: 0 0 66.66%;
}

.menu-recetas img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

/* Tipografía */
.menu-recetas h2 {
  font-family: 'Raleway', sans-serif;
  font-size: 1.8rem;
  color: #4e342e;
  margin-bottom: 10px;
}

.menu-recetas p {
  font-size: 1rem;
  color: #555;
}

/* 📱 Responsive para móvil */
@media (max-width: 768px) {
  .menu-flex {
    flex-direction: column;
  }

  .dos-sextos,
  .cuatro-sextos {
    flex: 0 0 100%;
    padding: 10px 0;
  }

  .menu-recetas h2,
  .menu-recetas p {
    text-align: center;
  }
}

/* Estilo para Menú semanal económico COMA */
.menu-coma {
  width: 100%;
  background-color: #f9f9f9;
  padding: 40px 20px;
}

.contenedor-coma {
  max-width: 1200px;
  margin: 40px auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.columna {
  box-sizing: border-box;
}

/* Texto ocupa 2/6 (33.33%) */
.texto-coma {
  flex: 50%;
}

.texto-coma h2 {
  font-family: 'Raleway', sans-serif;
  font-size: 1.8rem;
  color: #4e342e;
  margin-bottom: 10px;
}

.texto-coma p {
  font-size: 1rem;
  color: #555;
}

/* Imagen ocupa 4/6 (66.66%) */
.imagen-coma {
  flex: 50%;
}

.imagen-coma img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

/* Responsive para móvil */
@media (max-width: 768px) {
  .contenedor-coma {
    flex-direction: column-reverse;
    text-align: center;
  }

  .texto-coma,
  .imagen-coma {
    flex: 0 0 100%;
    text-align: center; 
  }

  .texto-coma h2 {
    font-size: 1.5rem;
  }
}

/* Sección Recetarios */
.recetarios {
  text-align: center;
  padding: 40px 20px;
  background-color: #f9f9f9;
}

.recetarios h2 {
  font-size: 2rem;
  margin-bottom: 30px;
  font-weight: bold;
  color: #333;
}

.recetarios-container {
  display: flex;
  justify-content: space-between; /* cambia de center a space-between */
  flex-wrap: wrap;
  max-width: 100%;
  padding: 0 20px; /* opcional, para que no pegue al borde */
}


.recetario-card {
  background: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  width: 180px;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.recetario-card:hover {
  transform: translateY(-5px);
}

.recetario-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.recetario-card h3 {
  margin: 10px 0;
  font-size: 1.1rem;
  color: #444;
}