@charset "utf-8";
/* CSS Document */
    <style>
    body {
      background-color: black;
      margin: 0;
      font-family: Arial, sans-serif;
    }
    table {
      width: 100%;
      text-align: center;
      background-color: black;
    }
    td {
      padding: 12px;
    }
    a {
      color: white;
      text-decoration: none;
      font-weight: bold;
      font-size: 16px;
    }
    a:hover {
      color: cyan;
    }
  </style>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            background-color: #00A3E0; /* Color de fondo general */
            display: flex;
            flex-direction: column; /* Para centrar el contenido verticalmente */
            align-items: center; /* Centra el contenido horizontalmente */
            padding: 20px;
        }

        /* Título principal de la sección de gastronomía */
        .gastronomy-title {
            font-size: 3em; /* Tamaño grande para el título */
            color: #333;
            text-align: center;
            margin-bottom: 50px; /* Espacio debajo del título */
            margin-top: 20px; /* Espacio encima del título */
        }

        /* Contenedor principal de los elementos de gastronomía */
        .gastronomy-container {
            display: flex; /* Habilitar Flexbox */
            justify-content: center; /* Centra los elementos horizontalmente */
            align-items: flex-start; /* Alinea los elementos al inicio (arriba) */
            gap: 30px; /* Espacio entre cada columna de alimento */
            max-width: 1200px; /* Ancho máximo para el contenedor */
            width: 100%; /* Ocupa el ancho disponible */
            padding: 20px;
            /* background-color: #ffffff; */ /* Puedes añadir un fondo al contenedor si quieres */
            /* border-radius: 8px; */
            /* box-shadow: 0 4px 10px rgba(0,0,0,0.1); */
        }

        /* Estilos para cada "tarjeta" de alimento (Quelites, Huitlacoche, Mole) */
        .gastronomy-item {
            flex: 1; /* Permite que cada elemento crezca y se encoja para ocupar el espacio */
            min-width: 280px; /* Ancho mínimo para cada tarjeta antes de apilarse */
            background-color: #ffffff; /* Fondo blanco para cada tarjeta */
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            text-align: center;
            padding-bottom: 20px; /* Espacio en la parte inferior de la tarjeta */
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden; /* Asegura que la imagen no se salga del borde redondeado */
        }

        .gastronomy-item img {
            width: 100%; /* La imagen ocupa todo el ancho de su contenedor */
            height: 200px; /* Altura fija para las imágenes */
            object-fit: cover; /* Recorta la imagen para que cubra el espacio sin distorsión */
            border-top-left-radius: 8px; /* Bordes redondeados superiores */
            border-top-right-radius: 8px;
            margin-bottom: 15px; /* Espacio debajo de la imagen */
        }

        .gastronomy-item h3 {
            font-size: 1.8em;
            color: #1C1C1C;
            margin-bottom: 10px; /* Espacio debajo del título del alimento */
            padding: 0 15px; /* Padding horizontal para el título */
        }

        .gastronomy-item p {
            font-size: 1em;
            color: #1C1C1C;
            line-height: 1.5;
            padding: 0 20px; /* Padding horizontal para la descripción */
        }

        /* Media Queries para responsividad */
        @media (max-width: 900px) {
            .gastronomy-container {
                flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente fila */
                justify-content: center; /* Centra los elementos cuando se envuelven */
            }

            .gastronomy-item {
                flex: 0 0 calc(50% - 20px); /* Dos columnas en pantallas medianas (con espacio entre ellas) */
                margin-bottom: 20px; /* Espacio entre las filas de elementos */
            }
        }

        @media (max-width: 600px) {
            .gastronomy-title {
                font-size: 2.2em; /* Reduce el tamaño del título principal */
                margin-bottom: 30px;
            }
            .gastronomy-item {
                flex: 0 0 90%; /* Una sola columna en pantallas pequeñas */
                margin-bottom: 20px;
            }
            .gastronomy-item h3 {
                font-size: 1.5em;
            }
            .gastronomy-item p {
                font-size: 0.9em;
            }
        }
		   footer {
      background-color: #023e8a;
      color: white;
      text-align: center;
      padding: 1rem 0;
      margin-top: 2rem;
    }
    </style>