Desarrollo web

Pizzería Mamma Mia

En este tutorial aprenderás a construir la Pizzería Mamma Mia utilizando únicamente HTML, CSS y JavaScript. Se explicarán los conceptos básicos y el proceso paso a paso para crear una página web …

Publicado: 19/03/2025 Por: Juan Felipe Orozco Cortés Duración: 5 horas
Ir al contenido Ir a comentarios Volver a tutoriales
Imagen del tutorial Pizzería Mamma Mia
Imagen del tutorial Pizzería Mamma Mia
☰ Contenido del tutorial ⌄

En este tutorial aprenderás a construir la Pizzería Mamma Mia utilizando únicamente HTML, CSS y JavaScript. Se explicarán los conceptos básicos y el proceso paso a paso para crear una página web interactiva y moderna.

Estructura de Contenido

En esta sección se mostrará la organización del proyecto a través de su estructura de carpetas, la cual actúa como la columna vertebral que reúne todos los archivos y recursos. Esta estructura agrupa los archivos HTML que conforman las páginas, las hojas de estilo en CSS, los scripts en JavaScript y los recursos multimedia (como imágenes). Comprender esta organización es fundamental para mantener el orden, facilitar el mantenimiento y asegurar la escalabilidad del proyecto.

├──  contacto.html
├── carta_bebidas.html
├── css
│   ├── base.css
│   ├── carta_bebidas.css
│   ├── contacto.css
│   ├── equipo.css
│   ├── factura.css
│   ├── foother.css
│   ├── header.css
│   ├── hero.css
│   ├── historia.css
│   ├── inicio.css
│   ├── menu_especialidades.css
│   ├── ofertas_menu.css
│   ├── pago_denegado.css
│   ├── pago_exitoso.css
│   ├── personaliza_pizza.css
│   ├── pizzas_classicas.css
│   ├── postres.css
│   ├── proveedores.css
│   └── testimonios.css
├── equipo.html
├── factura.html
├── historia.html
├── images
│   ├── bebidas.jpg
│   ├── client-1.jpg
│   ├── hero-bg.jpg
│   ├── logo.svg
│   ├── oferta-combo.jpg
│   ├── old-shop.jpg
│   ├── pizza-margarita.jpg
│   └── postres.jpg
├── indice.html
├── js
│   ├── carro.js
│   ├── mensaje.js
│   ├── navegacion.js
│   ├── personalizador.js
│   └── testimonios.js
├── menu_especialidades.html
├── ofertas_menu.html
├── pago_denegado.html
├── pago_exitoso.html
├── personalizar_pizza.html
├── pizzas_classicas.html
├── postres.html
├── proveedores.html
└── testimonios.html

Explicación de la Estructura de Carpetas

En este fragmento se muestra la organización del proyecto, que permite separar y gestionar de forma eficiente los distintos recursos utilizados en la Pizzería Mamma Mia. Dentro de la carpeta css se encuentran los estilos que definen la apariencia de la web. Los archivos header.css, hero.css, foother.css y base.css son los estilos comunes para todas las páginas HTML, asegurando una coherencia visual y funcional en toda la plantilla.

Asimismo, en la carpeta js se alojan los scripts que aportan interactividad al sitio. Los archivos cart.js y navigation.js contienen los elementos esenciales para el funcionamiento del carrito de compras y la navegación, respectivamente. Esta estructura modular facilita la gestión y el mantenimiento del proyecto, permitiendo que cada componente cumpla su función de manera óptima.

índice.html

Este archivo representa la página principal de la Pizzería Mamma Mia. Aquí se define la estructura completa de la web, desde la declaración del DOCTYPE hasta la integración de hojas de estilo y scripts. El archivo index.html organiza las secciones clave de la página: un encabezado con el menú de navegación, un área principal (main) que incluye la sección Hero, el listado de especialidades, ofertas y testimonios, y un pie de página con información de contacto y redes sociales. Además, se implementan elementos interactivos como el carrito de compras y modales, apoyados por JavaScript para mejorar la experiencia del usuario.

Bloque 1: Declaración y Encabezado

En este bloque se define la declaración del documento, el idioma y la sección <head> donde se establecen los metadatos, el título, el favicon, los enlaces a hojas de estilo y la integración de Font Awesome para los íconos. Esto prepara el entorno para la correcta visualización y funcionamiento de la página.

Plantilla Base HTML: Declaración y Encabezado

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pizzería - Menú</title>
    <link rel="icon" type="image/svg+xml" href="images/logo.svg">
    <!-- Iconos Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- Hojas de estilo -->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/hero.css">
    <link rel="stylesheet" href="css/foother.css" />
    <link rel="stylesheet" href="css/inicio.css">
  </head>
  <body>
    <!-- Aquí iría el contenido del body -->
  </body>
</html>

Explicación del código: "Plantilla Base HTML: Declaración y Encabezado"

<!DOCTYPE html>
Declara que el documento utiliza HTML5, lo cual es esencial para que los navegadores interpreten correctamente el contenido.

<html lang="es">
Abre la etiqueta principal del documento HTML e indica que el idioma del contenido es español.

<head>
La sección del <head> contiene metadatos, enlaces a hojas de estilo, scripts y el título de la página, que no se muestran directamente en el cuerpo del documento.

<meta charset="UTF-8">
Define la codificación de caracteres, asegurando que se muestren correctamente caracteres especiales y acentos en español.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Permite que el diseño se adapte a diferentes tamaños de pantalla y dispositivos, esencial para el diseño responsivo.

<title>Pizzería - Menú</title>
Establece el título que aparecerá en la pestaña del navegador, identificando la página como el menú de la pizzería.

<link rel="icon" type="image/svg+xml" href="images/logo.svg">
Vincula un ícono (favicon) que se mostrará en la pestaña del navegador.

Comentarios: <!-- Iconos Font Awesome --> y <!-- Hojas de estilo -->
Estos comentarios ayudan a organizar el código indicando la finalidad de los siguientes enlaces.

Enlaces a hojas de estilo y recursos externos:

Font Awesome:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
Este enlace incluye una librería de íconos para usar en la web.
Hojas de estilo CSS:
Se vinculan varios archivos CSS (base.css, header.css, hero.css, foother.css y inicio.css) que definen la apariencia y estructura visual de la página.
<body>
Contiene el contenido visible de la página web. Aquí se incluirá el resto de los elementos como encabezados, secciones, párrafos, etc.

Bloque 2: Encabezado y Navegación

En este bloque se define el encabezado de la página, donde se organiza la barra de navegación principal. Aquí se incluye el logotipo, el menú de navegación (con submenús desplegables para secciones como "Menú" y "Nosotros"), así como elementos interactivos como el carrito de compras y el botón "Ordenar Ahora". Este bloque es crucial para orientar al usuario y facilitar el acceso a las diferentes áreas del sitio web.

Plantilla Bloque 2: Encabezado y Navegación

<!DOCTYPE html>
<html lang="es">
  <!-- Bloque 1: Declaración y Encabezado ya fue agregado en el head -->
  <body>
    <!-- Bloque 2: Encabezado y Navegación -->
    <header>
      <nav class="nav-container">
        <div class="logo">🍕 Pizzería Mamma Mia</div>
        <ul class="nav-menu">
          <li class="nav-item">Inicio</li>
          <li class="nav-item">
            Menú
            <ul class="dropdown">
              <li>Pizzas Clásicas</li>
              <li>Especialidades</li>
              <li>Bebidas</li>
              <li>Postres</li>
            </ul>
          </li>
          <li class="nav-item">Personalizar Pizza</li>
          <li class="nav-item">Ofertas</li>
          <li class="nav-item">Testimonios</li>
          <li class="nav-item">
            Nosotros
            <ul class="dropdown">
              <li>Historia</li>
              <li>Equipo</li>
              <li>Proveedores</li>
            </ul>
          </li>
          <li class="nav-item">Contacto</li>
        </ul>
        <div class="order-section">
          <div class="cart-icon">
            🛒
            <span class="cart-count">3</span>
          </div>
          <button class="btn-order">Ordenar Ahora</button>
        </div>
        <div class="hamburger">☰</div>
      </nav>
    </header>
  </body>
</html>

Explicación del código: "Plantilla Base HTML: Declaración y Encabezado"

<header>
Define la sección de encabezado de la página, que agrupa elementos clave para la navegación y la identidad del sitio.

<nav class="nav-container">
Contiene la barra de navegación principal, organizada mediante la clase <code>nav-container</code> para aplicar estilos específicos.

<div class="logo">🍕 Pizzería Mamma Mia</div>
Muestra el logotipo y el nombre de la pizzería, sirviendo como identificador visual y de marca.

<ul class="nav-menu">
Inicia una lista desordenada que contiene los elementos del menú de navegación.

<li class="nav-item">Inicio</li>
Representa el enlace a la sección "Inicio".

<li class="nav-item">
Menú
<ul class="dropdown">
Contiene un submenú desplegable para la sección "Menú".

<li>Pizzas Clásicas</li>
Representa la opción "Pizzas Clásicas".

<li>Especialidades</li>
Representa la opción "Especialidades".

<li>Bebidas</li>
Representa la opción "Bebidas".

<li>Postres</li>
Representa la opción "Postres".

</ul>
</li>

<li class="nav-item">Personalizar Pizza</li>
Representa el enlace a la sección "Personalizar Pizza".

<li class="nav-item">Ofertas</li>
Representa el enlace a la sección "Ofertas".

<li class="nav-item">Testimonios</li>
Representa el enlace a la sección "Testimonios".

<li class="nav-item">
Nosotros
<ul class="dropdown">
Contiene un submenú desplegable para la sección "Nosotros".

<li>Historia</li>
Representa la opción "Historia".

<li>Equipo</li>
Representa la opción "Equipo".

<li>Proveedores</li>
Representa la opción "Proveedores".

</ul>
</li>

<li class="nav-item">Contacto</li>
Representa el enlace a la sección "Contacto".

</ul>

<div class="order-section">
Contiene la sección de pedido, que incluye el ícono del carrito de compras y el botón "Ordenar Ahora".

<div class="cart-icon">
Muestra el ícono del carrito de compras.

<span class="cart-count">3</span>
Indica la cantidad de artículos en el carrito.

</div>

<button class="btn-order">Ordenar Ahora</button>
Botón interactivo para iniciar el proceso de pedido.

</div>

<div class="hamburger">☰</div>
Incluye el ícono de menú tipo "hamburguesa" para dispositivos móviles, permitiendo mostrar u ocultar el menú de navegación.

</nav>

</header>

Bloque 3: Contenido de Inicio y Secciones Principales

En este bloque se organiza la parte central de la página, donde se muestra el mensaje principal de la marca y se invita al usuario a explorar el menú a través de la sección "Hero". Además, se destacan las especialidades de la pizzería en una galería de pizzas, se promocionan ofertas especiales y se comparten testimonios de clientes satisfechos, generando confianza y dinamismo. El bloque finaliza con un footer que agrupa la información de horarios, contacto y enlaces a redes sociales, proporcionando al usuario todos los datos necesarios para interactuar con la marca.

Plantilla Bloque 3: Contenido de Inicio y Secciones Principales

<!DOCTYPE html>
<html lang="es">
  <!-- Plantilla Bloque 1: Declaración y Encabezado -->
  <!-- El bloque 1 se coloca en el <head> e incluye la declaración del documento, 
       meta tags, título, enlaces a hojas de estilo y Font Awesome -->

  <head>
    <!-- Código del Bloque 1 va aquí -->
  </head>
  <body>
    <!-- Plantilla Bloque 2: Encabezado y Navegación -->
    <!-- El bloque 2 se coloca al inicio del <body> e incluye el header con la barra de navegación -->
    <!-- Código del Bloque 2 va aquí -->

    <!-- Plantilla Bloque 3: Contenido de Inicio y Secciones Principales -->
    <main>
      <!-- Sección Hero -->
      <section class="hero">
        <div class="hero-content">
          <h1>Pizza artesanal hecha con pasión</h1>
          <p>Ingredientes frescos · Horno de leña · Entrega rápida</p>
          <button class="btn-order">Ver Menú</button>
        </div>
      </section>

      <!-- Contenido de Inicio: Especialidades -->
      <section class="featured-pizzas">
        <div class="section-header">
          <h2>Nuestras Especialidades</h2>
          <p class="section-subtitle">Las favoritas de nuestros clientes</p>
        </div>
        <div class="pizza-grid">
          <div class="pizza-card">
            <div class="card-header">
              <img src="images/pizza-margarita.jpg" alt="Pizza Margarita" class="pizza-image">
              <div class="badge">Más vendida</div>
            </div>
            <div class="card-body">
              <h3>Margarita Clásica</h3>
              <p class="ingredients">Mozzarella fresca, albahaca y tomate San Marzano</p>
              <div class="card-footer">
                <span class="price">$12.99</span>
                <button class="btn-add">
                  <i class="fas fa-cart-plus"></i> Añadir
                </button>
              </div>
            </div>
          </div>

          <div class="pizza-card">
            <div class="card-header">
              <img src="images/pizza-margarita.jpg" alt="Pizza Margarita" class="pizza-image">
              <div class="badge">Más vendida</div>
            </div>
            <div class="card-body">
              <h3>Margarita Clásica</h3>
              <p class="ingredients">Mozzarella fresca, albahaca y tomate San Marzano</p>
              <div class="card-footer">
                <span class="price">$12.99</span>
                <button class="btn-add">
                  <i class="fas fa-cart-plus"></i> Añadir
                </button>
              </div>
            </div>
          </div>

          <div class="pizza-card">
            <div class="card-header">
              <img src="images/pizza-margarita.jpg" alt="Pizza Margarita" class="pizza-image">
              <div class="badge">Más vendida</div>
            </div>
            <div class="card-body">
              <h3>Margarita Clásica</h3>
              <p class="ingredients">Mozzarella fresca, albahaca y tomate San Marzano</p>
              <div class="card-footer">
                <span class="price">$12.99</span>
                <button class="btn-add">
                  <i class="fas fa-cart-plus"></i> Añadir
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Sección de Ofertas -->
      <section class="offers">
        <div class="offer-banner">
          <h2>¡2x1 en Martes!</h2>
          <p>Compra cualquier pizza grande y llévate otra gratis</p>
          <button class="btn-order">Aprovechar Oferta</button>
        </div>
      </section>

      <!-- Sección de Testimonios -->
      <section class="testimonials">
        <div class="section-header">
          <h2>Lo que dicen nuestros clientes</h2>
          <p class="section-subtitle">Más de 1,000 clientes satisfechos este mes</p>
        </div>
        <div class="testimonial-grid">
          <div class="testimonial-card">
            <div class="client-header">
              <img src="images/client-1.jpg" alt="Cliente satisfecho" class="client-avatar">
              <div class="client-info">
                <h3>Juan Pérez</h3>
                <span class="order-date">15 Julio 2023</span>
              </div>
              <div class="verified-badge">
                <i class="fas fa-check-circle"></i>
                Compra verificada
              </div>
            </div>
            <div class="rating">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
            </div>
            <blockquote>"La mejor pizza napolitana que he probado en mi vida. ¡La masa es simplemente perfecta!"</blockquote>
          </div>
          
          <div class="testimonial-card">
            <div class="client-header">
              <img src="images/client-1.jpg" alt="Cliente satisfecho" class="client-avatar">
              <div class="client-info">
                <h3>Juan Pérez</h3>
                <span class="order-date">15 Julio 2023</span>
              </div>
              <div class="verified-badge">
                <i class="fas fa-check-circle"></i>
                Compra verificada
              </div>
            </div>
            <div class="rating">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
            </div>
            <blockquote>"La mejor pizza napolitana que he probado en mi vida. ¡La masa es simplemente perfecta!"</blockquote>
          </div>

          <div class="testimonial-card">
            <div class="client-header">
              <img src="images/client-1.jpg" alt="Cliente satisfecho" class="client-avatar">
              <div class="client-info">
                <h3>Juan Pérez</h3>
                <span class="order-date">15 Julio 2023</span>
              </div>
              <div class="verified-badge">
                <i class="fas fa-check-circle"></i>
                Compra verificada
              </div>
            </div>
            <div class="rating">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
            </div>
            <blockquote>"La mejor pizza napolitana que he probado en mi vida. ¡La masa es simplemente perfecta!"</blockquote>
          </div>
        </div>
      </section>
      
      <!-- Footer -->
      <footer class="footer">
        <div class="footer-content">
          <div class="footer-section">
            <h4>Horarios</h4>
            <p>Lunes-Domingo: 11am - 11pm</p>
          </div>
          <div class="footer-section">
            <h4>Contacto</h4>
            <p>Tel: 555-1234</p>
            <p>contacto@pizzeriamm.com</p>
          </div>
          <div class="footer-section">
            <h4>Síguenos</h4>
            <div class="social-icons">
              <i class="fab fa-facebook"></i>
              <i class="fab fa-instagram"></i>
              <i class="fab fa-whatsapp"></i>
            </div>
          </div>
        </div>
      </footer>
    </main>

    <!-- (Opcional) Otros elementos o scripts adicionales -->
  </body>
</html>

Explicación del código: "Contenido de Inicio y Secciones Principales"

<main>
Define la sección principal de la página, que agrupa los elementos centrales de contenido que interactúan con el usuario, desde la presentación de la marca hasta la información relevante y la interacción.

<!-- Sección Hero -->
<section class="hero">
Contiene el área destacada de la página, diseñada para captar la atención del usuario con un mensaje impactante y una llamada a la acción.

<div class="hero-content">
Agrupa el contenido textual y el botón de llamada a la acción.
      
<h1>Pizza artesanal hecha con pasión</h1>
Muestra el título principal que comunica la propuesta de valor de la pizzería.

<p>Ingredientes frescos · Horno de leña · Entrega rápida</p>
Proporciona una breve descripción de los atributos diferenciales del producto.

<button class="btn-order">Ver Menú</button>
Botón interactivo que invita al usuario a explorar el menú.
</div>
</section>

<!-- Contenido de Inicio (Pizzas, Ofertas, Testimonios y Footer) -->
<section class="featured-pizzas">
Esta sección destaca las especialidades de la pizzería, mostrando los productos más vendidos y atractivos visualmente.

<div class="section-header">
<h2>Nuestras Especialidades</h2>
Título que introduce la galería de pizzas.

<p class="section-subtitle">Las favoritas de nuestros clientes</p>
Subtítulo que refuerza la popularidad de los productos destacados.
</div>

<div class="pizza-grid">
Agrupa los diferentes productos en un formato de cuadrícula para una visualización organizada y atractiva.

<div class="pizza-card">
Representa una tarjeta individual de producto, en este caso una pizza.

<div class="card-header">
<img src="images/pizza-margarita.jpg" alt="Pizza Margarita" class="pizza-image">
Muestra la imagen del producto, que facilita la identificación visual.

<div class="badge">Más vendida</div>
Etiqueta que resalta la popularidad del producto.
</div>

<div class="card-body">
<h3>Margarita Clásica</h3>
Nombre del producto.

<p class="ingredients">Mozzarella fresca, albahaca y tomate San Marzano</p>
Lista de ingredientes que detalla los componentes principales del producto.

<div class="card-footer">
Agrupa el precio y el botón de acción.
            
<span class="price">$12.99</span>
Muestra el precio del producto.

<button class="btn-add">
<i class="fas fa-cart-plus"></i> Añadir
</button>
Botón para agregar el producto al carrito.
</div>
</div>
</div>
<!-- Se repite la estructura para cada pizza -->
</div>
</section>

<!-- Sección de Ofertas -->
<section class="offers">
Esta sección promociona ofertas especiales, incentivando al usuario a aprovechar descuentos o promociones.

<div class="offer-banner">
<h2>¡2x1 en Martes!</h2>
Título que anuncia la promoción.

<p>Compra cualquier pizza grande y llévate otra gratis</p>
Detalla la oferta, incentivando la acción.

<button class="btn-order">Aprovechar Oferta</button>
Botón que dirige al usuario a la acción para aprovechar la promoción.
</div>
</section>

<!-- Sección de Testimonios -->
<section class="testimonials">
Muestra opiniones y valoraciones de clientes, aportando credibilidad y confianza al sitio.

<div class="section-header">
<h2>Lo que dicen nuestros clientes</h2>
Título introductorio de los testimonios.

<p class="section-subtitle">Más de 1,000 clientes satisfechos este mes</p>
Subtítulo que refuerza la experiencia positiva de los clientes.
</div>

<div class="testimonial-grid">
Agrupa las tarjetas de testimonios en un formato de cuadrícula para una visualización clara y organizada.

<div class="testimonial-card">
Representa una tarjeta individual de testimonio.

<div class="client-header">
<img src="images/client-1.jpg" alt="Cliente satisfecho" class="client-avatar">
Imagen del cliente, aportando un toque personal y visual.

<div class="client-info">
<h3>Juan Pérez</h3>
Nombre del cliente.

<span class="order-date">15 Julio 2023</span>
Fecha de la compra o experiencia, aportando contexto temporal.
</div>

<div class="verified-badge">
<i class="fas fa-check-circle"></i>
Indica que la compra del cliente ha sido verificada, aportando mayor credibilidad.
</div>
</div>

<div class="rating">
Íconos que representan la calificación del cliente en forma de estrellas.
</div>

<blockquote>"La mejor pizza napolitana que he probado en mi vida. ¡La masa es simplemente perfecta!"</blockquote>
Cita textual del testimonio del cliente.
</div>
<!-- Se repite la estructura para cada testimonio -->
</div>
</section>
  
<!-- Footer -->
<footer class="footer">
Define el pie de página, donde se agrupan detalles adicionales como horarios, información de contacto y enlaces a redes sociales.

<div class="footer-content">
<div class="footer-section">
<h4>Horarios</h4>
Título de la sección de horarios.

<p>Lunes-Domingo: 11am - 11pm</p>
Indica el horario de atención.
</div>

<div class="footer-section">
<h4>Contacto</h4>
Título de la sección de contacto.

<p>Tel: 555-1234</p>
Proporciona un número de teléfono de contacto.

<p>contacto@pizzeriamm.com</p>
Proporciona un correo electrónico para mayor información.
</div>

<div class="footer-section">
<h4>Síguenos</h4>
Título de la sección de redes sociales.

<div class="social-icons">
<i class="fab fa-facebook"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-whatsapp"></i>
Íconos de redes sociales que permiten a los usuarios seguir las novedades de la pizzería.
</div>
</div>
</div>
</footer>
</main>

Bloque 4: Modal del Carrito y Funcionalidad JavaScript

En este bloque se implementa el modal del carrito, que permite a los usuarios visualizar y gestionar los productos seleccionados antes de proceder a la compra. Dentro del modal se muestra la lista de productos, cada uno con su imagen, cantidad y precio, además de ofrecer opciones para eliminar productos individualmente. Al final, se presenta el total acumulado y un botón para avanzar al proceso de pago. Finalmente, se integran archivos JavaScript que habilitan la navegación y el funcionamiento dinámico del carrito, garantizando una experiencia interactiva y fluida.

Plantilla Bloque 4: Modal del Carrito y Archivos JavaScript

<!DOCTYPE html>
<html lang="es">
  <!-- Plantilla Bloque 1: Declaración y Encabezado -->
  <!-- Aquí va el código del Bloque 1 -->

  <head>
    <!-- Código del Bloque 1 -->
  </head>
  <body>
    <!-- Plantilla Bloque 2: Encabezado y Navegación -->
    <!-- Aquí va el código del Bloque 2 -->

    <!-- Plantilla Bloque 3: Contenido de Inicio y Secciones Principales -->
    <!-- Aquí va el código del Bloque 3 -->

    <!-- Plantilla Bloque 4: Modal del Carrito y Archivos JavaScript -->
    <div class="cart-modal">
      <div class="cart-content">
        <span class="close-cart">×</span>
        <h2>Tu Carrito 🛒</h2>
        <div class="cart-items">
          <!-- Ejemplo de producto -->
          <div class="cart-item">
            <img src="images/pizza-margarita.jpg" alt="Pizza Margarita">
            <div class="item-info">
              <h3>Pizza Margarita</h3>
              <p>Cantidad: 1</p>
              <p class="price">$12.99</p>
            </div>
            <div class="item-actions">
              <button class="btn-remove">🗑</button>
            </div>
          </div>
          <!-- Más productos... -->
        </div>
        <div class="cart-total">
          <h3>Total: $34.97</h3>
          <button class="btn-checkout">Pagar Ahora</button>
        </div>
      </div>
    </div>

    <!-- Archivos JavaScript -->
    <script src="js/navigation.js"></script>
    <script src="js/cart.js"></script>
  </body>
</html>

Explicación del código: "Modal del Carrito y Archivos JavaScript"

<div class="cart-modal">
Define el contenedor principal para el modal (ventana emergente) del carrito de compras, es decir, el área que se muestra u oculta cuando el usuario interactúa con el carrito.

<div class="cart-content">
Contiene todo el contenido del carrito, agrupando los elementos (productos) y el resumen de la compra.

<span class="close-cart">×</span>
Representa el botón para cerrar el modal. El carácter “×” (×) indica la acción de cerrar.

<h2>Tu Carrito 🛒</h2>
Título que le indica al usuario que está viendo su carrito de compras.

<div class="cart-items">
Contenedor que agrupa todos los productos añadidos al carrito.

<!-- Ejemplo de producto -->
Comentario que indica que lo siguiente es un ejemplo de producto.

<div class="cart-item">
Representa un producto individual dentro del carrito.

<img src="images/pizza-margarita.jpg" alt="Pizza Margarita">
Muestra la imagen del producto (en este caso, una pizza Margarita).

<div class="item-info">
Contiene la información relevante del producto.

<h3>Pizza Margarita</h3>
Muestra el nombre del producto.

<p>Cantidad: 1</p>
Indica la cantidad del producto añadido al carrito.

<p class="price">$12.99</p>
Muestra el precio unitario del producto.

</div>
Cierra el contenedor de información del producto.

<div class="item-actions">
Agrupa las acciones disponibles para el producto, como eliminarlo del carrito.

<button class="btn-remove">🗑</button>
Botón que permite eliminar el producto del carrito, representado con un ícono de papelera.

</div>
Cierra el contenedor de acciones del producto.

</div>
Cierra el contenedor del producto.

<!-- Más productos... -->
Comentario que indica que pueden existir más productos añadidos al carrito.

</div>
Cierra el contenedor de todos los productos.

<div class="cart-total">
Contenedor que muestra el resumen final del carrito, incluyendo el total de la compra y la opción de pago.

<h3>Total: $34.97</h3>
Muestra el monto total de todos los productos en el carrito.

<button class="btn-checkout">Pagar Ahora</button>
Botón interactivo que inicia el proceso de pago, permitiendo al usuario proceder con la compra.

</div>
Cierra el contenedor del total del carrito.

</div>
Cierra el contenedor que agrupa el contenido interno del carrito.

</div>
Cierra el contenedor principal del modal del carrito.

Archivos JavaScript:

<script src="js/navigation.js"></script>
Incluye el archivo JavaScript encargado de la navegación, que puede gestionar menús o la interacción con otros elementos de la página.

<script src="js/cart.js"></script>
Incluye el archivo JavaScript que controla la funcionalidad del carrito de compras, como agregar o eliminar productos y actualizar el total.

base.css

Este archivo define la configuración base de estilos para la web de la Pizzería Mamma Mia. Se establecen las reglas globales (como el reset de márgenes, paddings y la tipografía), se definen variables de color y dimensiones, y se aplican estilos a elementos interactivos como botones. Esto garantiza una apariencia coherente en todo el sitio, facilitando futuras modificaciones y la integración con otros archivos de estilo.

Base.css - Reset, Tipografía Global, Variables y Estilos Base

/* base.css */
/* Reset y tipografía global */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

/* Variables globales */
:root {
  --color-primario: #C62828;     /* Rojo intenso */
  --color-secundario: #FFB300;     /* Dorado cálido */
  --color-texto: #2D2D2D;          /* Gris oscuro */
  --header-height: 70px;         /* Altura del header */
}

/* Compensar el header fijo para que el contenido no se superponga */
body {
  padding-top: var(--header-height);
  background: #fff;
  color: var(--color-texto);
}

/* Estilo global para botones de orden */
.btn-order {
  background: #2a9d8f;
  color: white;
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s;
}

.btn-order:hover {
  transform: scale(1.05);
}

/* Evitar que la sección hero tenga un margen extra (ya se compensa con el padding del body) */
.hero {
  margin-top: 0 !important;
}

Explicación del código: "Base.css - Reset, Tipografía Global, Variables y Estilos Base"

/ base.css /
Comentario que indica el inicio del archivo de estilos base.

/ Reset y tipografía global /
Comentario que explica que se aplican estilos para reiniciar márgenes, paddings y definir la tipografía global.

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Arial', sans-serif; }
Se aplica un reset global eliminando márgenes y paddings predeterminados; se establece el modelo de caja para incluir bordes y paddings en el tamaño total de los elementos, y se define 'Arial' como fuente predeterminada.

:root { --color-primario: #C62828; / Rojo intenso / --color-secundario: #FFB300; / Dorado cálido / --color-texto: #2D2D2D; / Gris oscuro / --header-height: 70px; / Altura del header / }
Se definen variables CSS globales para reutilizar colores y dimensiones:

--color-primario: Define un rojo intenso.
--color-secundario: Define un dorado cálido.
--color-texto: Define un gris oscuro para el texto.
--header-height: Establece la altura del encabezado.
body { padding-top: var(--header-height); background: #fff; color: var(--color-texto); }
El cuerpo de la página tiene un padding superior equivalente a la altura del header para evitar que el contenido se superponga; se define el fondo blanco y el color del texto usando la variable --color-texto.

.btn-order { background: #2a9d8f; color: white; padding: 0.8rem 1.5rem; border-radius: 25px; border: none; cursor: pointer; transition: transform 0.2s; }
Estilo para botones de orden:

Se asigna un fondo de color (verde azulado).
Se define el color del texto en blanco.
Se aplican paddings para un espacio interno adecuado.
Se redondean los bordes con un radio de 25px.
Se elimina el borde y se cambia el cursor a pointer para indicar interactividad.
Se añade una transición para animar transformaciones.
.btn-order:hover { transform: scale(1.05); }
Cuando el botón es hover (el usuario pasa el cursor sobre él), se incrementa ligeramente su tamaño (105%) para resaltar la interacción.

.hero { margin-top: 0 !important; }
Se evita que la sección "hero" tenga un margen superior adicional, ya que el padding del body compensa la posición del header fijo.

header.css

Este archivo define los estilos específicos para la cabecera de la web de la Pizzería Mamma Mia. Se configura una barra de navegación fija que incluye el logo, el menú y el ícono del carrito, integrando efectos de interactividad y un modal para el carrito. Además, se aplican reglas responsive para garantizar una óptima visualización en dispositivos móviles.

Header.css - Estilos de Encabezado, Navegación y Carrito 

/* header.css */
header {
  background: var(--color-primario);
  padding: 1rem 2rem;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
}

.nav-menu {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-item {
  position: relative;
  color: white;
  cursor: pointer;
  padding: 0.5rem;
  transition: all 0.3s;
}

.nav-item:hover {
  color: var(--color-secundario);
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  display: none;
  min-width: 200px;
  z-index: 1000;
}

.dropdown li {
  padding: 0.8rem;
  color: var(--color-texto);
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.dropdown li:hover {
  background: #f8f8f8;
}

.nav-item:hover .dropdown {
  display: block;
}

.order-section {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.cart-icon {
  color: white;
  position: relative;
  cursor: pointer;
}

.cart-count {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--color-secundario);
  color: white;
  padding: 2px 8px;
  border-radius: 50%;
  font-size: 0.8rem;
}

.hamburger {
  display: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Estilos para dispositivos móviles */
@media (max-width: 768px) {
  .hamburger {
    display: block;
  }

  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-primario);
    flex-direction: column;
    padding: 1rem;
  }

  .nav-menu.active {
    display: flex;
  }
}

/* Modal del Carrito */
.cart-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.cart-modal.show {
  display: flex;
}

.cart-content {
  background: #fff;
  padding: 2rem;
  border-radius: 10px;
  width: 90%;
  max-width: 500px;
  position: relative;
}

.close-cart {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 1.5rem;
}

.cart-items {
  max-height: 300px;
  overflow-y: auto;
  margin-top: 1rem;
}

.cart-item {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.cart-item img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  margin-right: 1rem;
}

.item-info h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.item-info p {
  font-size: 0.9rem;
  margin: 0.2rem 0;
}

.item-actions {
  margin-left: auto;
}

.btn-remove {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--color-primario);
}

.cart-total {
  border-top: 1px solid #ccc;
  padding-top: 1rem;
  text-align: center;
  margin-top: 1rem;
}

.btn-checkout {
  background: var(--color-secundario);
  color: white;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: transform 0.2s;
  margin-top: 1rem;
}

.btn-checkout:hover {
  transform: scale(1.05);
}

Explicación del código: " Header.css - Estilos de Encabezado, Navegación y Carrito "

/ header.css /
Comentario que indica el inicio del archivo de estilos para el header o encabezado de la página.

header {
background: var(--color-primario);
padding: 1rem 2rem;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
Se establece el estilo del encabezado principal:

Se usa una variable CSS para asignar el color de fondo (color primario).
Se define un padding interno de 1rem en vertical y 2rem en horizontal.
Se fija la posición en la parte superior de la ventana, ocupando todo el ancho, para que se mantenga visible al hacer scroll.
Se asigna un z-index elevado para posicionarlo por encima de otros elementos y se agrega una sombra sutil para dar profundidad.
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
Esta clase organiza el contenido dentro del header:

Utiliza flexbox para distribuir los elementos.
Los elementos se separan uniformemente con "space-between" y se alinean verticalmente en el centro.
Se limita el ancho máximo y se centra el contenedor horizontalmente con márgenes automáticos.
.logo {
color: white;
font-size: 1.5rem;
font-weight: bold;
}
Se define el estilo del logotipo:

Se asigna el color blanco, un tamaño de fuente considerable y se resalta con negrita.
.nav-menu {
display: flex;
gap: 2rem;
list-style: none;
}
El menú de navegación se presenta en línea:

Se usa flexbox para mostrar los elementos en una fila.
Se establece un espacio de 2rem entre cada elemento y se eliminan los estilos de lista predeterminados.
.nav-item {
position: relative;
color: white;
cursor: pointer;
padding: 0.5rem;
transition: all 0.3s;
}
Cada elemento del menú tiene:

Posicionamiento relativo para ubicar posibles submenús (dropdown).
Color blanco y un puntero para indicar que es interactivo.
Un pequeño padding y una transición para suavizar cambios en estado hover.
.nav-item:hover {
color: var(--color-secundario);
}
Al pasar el cursor, se cambia el color del texto a uno definido como secundario, resaltando la interactividad.

.dropdown {
position: absolute;
top: 100%;
left: 0;
background: white;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
display: none;
min-width: 200px;
z-index: 1000;
}
El menú desplegable se posiciona:

De forma absoluta, justo debajo del elemento padre (top: 100%).
Con fondo blanco y sombra para diferenciarlo visualmente.
Oculto por defecto y con un ancho mínimo para asegurar legibilidad.
.dropdown li {
padding: 0.8rem;
color: var(--color-texto);
border-bottom: 1px solid #eee;
cursor: pointer;
}
Cada opción del dropdown tiene:

Un padding generoso, color de texto definido y una línea divisoria inferior para separar opciones.
Un cursor pointer para enfatizar su interactividad.
.dropdown li:hover {
background: #f8f8f8;
}
Al pasar el cursor sobre cada opción, se cambia el fondo para dar feedback visual.

.nav-item:hover .dropdown {
display: block;
}
Se hace visible el menú desplegable cuando el usuario pasa el cursor sobre el elemento padre.

.order-section {
display: flex;
align-items: center;
gap: 1.5rem;
}
Esta sección organiza elementos relacionados con la orden (como iconos o botones):

Utiliza flexbox para alinearlos horizontalmente y centrar verticalmente.
Se establece un espacio de 1.5rem entre cada elemento.
.cart-icon {
color: white;
position: relative;
cursor: pointer;
}
El icono del carrito:

Se muestra en blanco, se posiciona de forma relativa para ubicar el contador y se marca como interactivo.
.cart-count {
position: absolute;
top: -10px;
right: -10px;
background: var(--color-secundario);
color: white;
padding: 2px 8px;
border-radius: 50%;
font-size: 0.8rem;
}
El contador del carrito se posiciona sobre el icono:

Se ubica de forma absoluta, ligeramente fuera de la esquina superior derecha.
Se asigna un fondo con el color secundario, texto blanco, un padding pequeño, bordes redondeados y un tamaño de fuente reducido para ajustarse al espacio.
.hamburger {
display: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
}
El icono de menú hamburguesa, destinado a dispositivos móviles, se oculta por defecto y se estiliza con color blanco y tamaño adecuado.

@media (max-width: 768px) {
.hamburger {
display: block;
}

.nav-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--color-primario);
flex-direction: column;
padding: 1rem;
}

.nav-menu.active {
display: flex;
}
}
Dentro de la consulta para dispositivos con pantalla menor a 768px:

Se muestra el icono de la hamburguesa.
El menú de navegación se oculta por defecto, se posiciona de forma absoluta y se organiza en columna, con fondo del color primario y un padding interno.
Al agregar la clase "active", el menú se muestra en formato flex.
Modal del Carrito
.cart-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
display: none;
align-items: center;
justify-content: center;
z-index: 2000;
}
Se define la superposición para el modal del carrito:

Se posiciona fijo para cubrir toda la pantalla, con un fondo semitransparente.
Inicialmente oculto, se centra su contenido y se le asigna un z-index alto para sobresalir sobre otros elementos.
.cart-modal.show {
display: flex;
}
Al añadir la clase "show", el modal se muestra utilizando flexbox.

.cart-content {
background: #fff;
padding: 2rem;
border-radius: 10px;
width: 90%;
max-width: 500px;
position: relative;
}
El contenido del modal se presenta como una caja:

Con fondo blanco, amplio padding y bordes redondeados.
Se ajusta al 90% del ancho disponible con un máximo de 500px y se posiciona de forma relativa para ubicar elementos adicionales.
.close-cart {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
font-size: 1.5rem;
}
El botón para cerrar el modal se posiciona en la esquina superior derecha del contenido, es interactivo y tiene un tamaño de fuente mayor para facilitar su identificación.

.cart-items {
max-height: 300px;
overflow-y: auto;
margin-top: 1rem;
}
La lista de items del carrito se limita en altura:

Se establece una altura máxima con scroll vertical para evitar que se extienda demasiado y se añade un margen superior.
.cart-item {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
Cada item dentro del carrito se muestra en línea:

Se utiliza flexbox para alinear la imagen y la información, separándolos con un margen inferior.
.cart-item img {
width: 60px;
height: 60px;
object-fit: cover;
margin-right: 1rem;
}
La imagen del producto en el carrito:

Se fija a 60px por lado, se ajusta con "object-fit: cover" para mantener la proporción y se separa del contenido adyacente mediante un margen derecho.
.item-info h3 {
font-size: 1rem;
margin-bottom: 0.5rem;
}

.item-info p {
font-size: 0.9rem;
margin: 0.2rem 0;
}
La información del producto se muestra en dos niveles:

El título (h3) con un tamaño de fuente moderado y un pequeño margen inferior.
La descripción o detalles en párrafos con tamaño un poco menor y márgenes reducidos.
.item-actions {
margin-left: auto;
}
El contenedor de acciones (como botones de eliminar) se posiciona a la derecha mediante un margen automático a la izquierda.

.btn-remove {
background: transparent;
border: none;
cursor: pointer;
font-size: 1.2rem;
color: var(--color-primario);
}
El botón para remover un item:

Tiene fondo transparente, sin bordes, un cursor pointer, un tamaño de fuente destacado y usa el color primario para resaltar.
.cart-total {
border-top: 1px solid #ccc;
padding-top: 1rem;
text-align: center;
margin-top: 1rem;
}
El resumen del carrito (total) se delimita con:

Una línea superior, padding y márgenes para separar visualmente, y se centra el texto.
.btn-checkout {
background: var(--color-secundario);
color: white;
padding: 0.8rem 1.5rem;
border: none;
border-radius: 25px;
cursor: pointer;
transition: transform 0.2s;
margin-top: 1rem;
}
El botón para finalizar la compra (checkout):

Se establece con el color secundario de fondo, texto en blanco y un padding cómodo.
Se eliminan bordes, se redondean sus esquinas y se añade una transición para efectos interactivos.
.btn-checkout:hover {
transform: scale(1.05);
}
Al pasar el cursor sobre el botón de checkout, se incrementa ligeramente su tamaño (escala del 105%) para enfatizar la acción de manera visual.

hero.css

Este archivo define los estilos para la sección principal de la página web de la Pizzería Mamma Mia, estableciendo una altura de 80vh y aplicando un fondo compuesto por una imagen con degradado que aporta profundidad. Además, centra el contenido de forma vertical y horizontal, destacando el título mediante un gran tamaño de fuente y un sutil efecto de sombra, lo que contribuye a una presentación visual impactante y moderna.

Hero.css - Estilos de Sección Hero: Fondo, Contenido y Tipografía 

/* hero.css */
.hero {
  height: 80vh;
  background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('../images/hero-bg.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 70px;
  color: white;
  text-align: center;
}

.hero-content {
  padding: 2rem;
  border-radius: 10px;
}

.hero-content h1 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

Explicación del código: " Hero.css - Estilos de Sección Hero: Fondo, Contenido y Tipografía "

/ hero.css /
Comentario que indica el inicio del archivo de estilos para la sección 'hero', que generalmente se utiliza como la imagen o área principal de una página.

.hero {
height: 80vh;
background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('../images/hero-bg.jpg') center/cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
margin-top: 70px;
color: white;
text-align: center;
}
Esta clase define el estilo principal de la sección 'hero':

Se establece una altura del 80% de la altura del viewport para ocupar gran parte de la pantalla.
El fondo combina un degradado lineal semitransparente (para oscurecer la imagen) con una imagen de fondo situada en '../images/hero-bg.jpg'; la imagen se centra, se ajusta para cubrir todo el contenedor y no se repite.
Se utiliza display: flex junto con align-items y justify-content para centrar el contenido tanto vertical como horizontalmente.
Se añade un margen superior de 70px para compensar la altura del header fijo.
Se define el color del texto en blanco y se alinea al centro.
.hero-content {
padding: 2rem;
border-radius: 10px;
}
La clase 'hero-content' aplica estilos al contenedor interno del hero:

Se añade un padding de 2rem para dar espacio interno al contenido.
Se redondean las esquinas con un radio de 10px, lo que suaviza los bordes del contenedor.
.hero-content h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
Estos estilos se aplican al título principal dentro de 'hero-content':

Se establece un tamaño de fuente grande (3.5rem) para destacar el título.
Se añade un margen inferior de 1rem para separar visualmente el título de otros elementos.
Se aplica una sombra de texto (2px 2px 4px) en color semitransparente, lo que mejora la legibilidad del texto sobre el fondo.

Este archivo define los estilos específicos para el pie de página de la web de la Pizzería Mamma Mia. Se establecen reglas de fondo, color, espaciado y distribución para asegurar una presentación coherente y atractiva, reutilizando estilos globales y de otras secciones. Además, se incluyen ajustes responsivos para adaptarse a la sección de Bebidas cuando sea necesario.

Footer.css - Estilos de Footer 

/* FOOTER */
  .footer {
    background: var(--color-texto);
    color: white;
    padding: 3rem 2rem;
    width: 100%;
  }
  
  .footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    text-align: center;
  }
  
  .footer-section h4 {
    margin-bottom: 1rem;
  }
  
  .social-icons {
    font-size: 1.5rem;
    margin-top: 1rem;
  }
  
  .social-icons i {
    margin: 0 0.5rem;
    cursor: pointer;
  }
  
  /* RESPONSIVE AJUSTES */
  @media (max-width: 768px) {
    .drinks-menu {
      padding: 4rem 1rem;
    }
    .drink-header {
      height: 180px;
    }
    .footer {
      padding: 2rem 1rem;
    }
  }

Explicación del código: " Footer.css - Estilos de Footer "

/ FOOTER /
Comentario que indica el inicio de los estilos para el pie de página.

.footer {
background: var(--color-texto);
color: white;
padding: 3rem 2rem;
width: 100%;
}
Se definen los estilos generales del footer:

El fondo se asigna con la variable --color-texto, lo que puede indicar un color oscuro o contrastante.
Se establece el color del texto en blanco para garantizar legibilidad.
Se aplica un padding de 3rem vertical y 2rem horizontal para proporcionar espacio interno.
Se define el ancho al 100% para que ocupe todo el ancho disponible.
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
text-align: center;
}
Este bloque organiza el contenido interno del footer usando CSS Grid:

Se utiliza grid layout para distribuir los elementos.
La plantilla de columnas se define con "repeat(auto-fit, minmax(200px, 1fr))", lo que permite que las columnas se adapten automáticamente al espacio, con un ancho mínimo de 200px y expandiéndose hasta 1fr.
Se establece un espacio (gap) de 2rem entre los elementos del grid.
Se limita el ancho máximo a 1200px y se centra el contenido horizontalmente mediante márgenes automáticos.
Se añade un padding horizontal de 1rem y se centra el texto.
.footer-section h4 {
margin-bottom: 1rem;
}
En cada sección del footer, el encabezado h4:

Tiene un margen inferior de 1rem para separar visualmente el título de otros elementos.
.social-icons {
font-size: 1.5rem;
margin-top: 1rem;
}
La clase para los iconos sociales:

Aumenta el tamaño de fuente a 1.5rem para resaltar los iconos.
Añade un margen superior de 1rem para separar los iconos del contenido superior.
.social-icons i {
margin: 0 0.5rem;
cursor: pointer;
}
Para cada icono dentro de la sección de redes sociales:

Se aplica un margen horizontal de 0.5rem para espaciar los iconos.

El cursor se cambia a pointer para indicar que son interactivos.

/ RESPONSIVE AJUSTES /
@media (max-width: 768px) {
.drinks-menu {
padding: 4rem 1rem;
}
.drink-header {
height: 180px;
}
.footer {
padding: 2rem 1rem;
}
}
Dentro de la consulta de medios para pantallas con un ancho máximo de 768px se realizan ajustes responsivos:

Para la clase .drinks-menu se aumenta el padding vertical a 4rem y se reduce el horizontal a 1rem, adaptando el espacio a dispositivos móviles.
Se define una altura fija de 180px para .drink-header, ajustándose al diseño en pantallas pequeñas.
En el footer se reduce el padding a 2rem vertical y 1rem horizontal, para mantener una proporción adecuada en dispositivos móviles.

inicio.css

Este archivo define los estilos para las secciones de inicio de la web de la Pizzería Mamma Mia, abarcando la presentación de pizzas destacadas, ofertas y testimonios. Se establecen diseños en grilla para mostrar tarjetas de producto y testimonios, aplicando sombras, transiciones y estilos tipográficos que realzan la información y mantienen una coherencia visual en todo el sitio.

Inicio.css - Estilos para Featured Pizzas, Ofertas y Testimonios 

/* inicio.css */

.featured-pizzas {
  padding: 4rem 2rem;
  background: #fff;
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-subtitle {
  color: var(--color-secundario);
  font-size: 1.2rem;
  margin-top: 0.5rem;
}

.pizza-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

.pizza-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s;
  position: relative;
}

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

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

.badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: var(--color-primario);
  color: white;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: bold;
}

.card-body {
  padding: 1.5rem;
  text-align: center;
}

.card-body h3 {
  color: var(--color-texto);
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
}

.ingredients {
  color: #666;
  font-size: 0.95rem;
  min-height: 60px;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}

.price {
  color: var(--color-primario);
  font-size: 1.5rem;
  font-weight: bold;
}

.btn-add {
  background: var(--color-secundario);
  color: white;
  padding: 0.7rem 1.5rem;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.btn-add:hover {
  background: #e76f51;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(247,143,30,0.3);
}

.btn-add i {
  font-size: 1.1rem;
}

/* Sección Ofertas */
.offers {
  background: var(--color-secundario);
  color: white;
  padding: 4rem 2rem;
  text-align: center;
}

/* Sección Testimonios */
.testimonials {
  padding: 4rem 2rem;
  background: #fafafa;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 2rem;
}

.testimonial-card {
  background: #f8f8f8;
  padding: 1.5rem;
  border-radius: 10px;
  text-align: center;
}

.rating {
  color: #ffd700;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

blockquote {
  color: #444;
  font-style: italic;
  line-height: 1.6;
  position: relative;
  padding-left: 2rem;
}

blockquote::before {
  content: "“";
  position: absolute;
  left: 0;
  top: -0.5rem;
  font-size: 3rem;
  color: var(--color-secundario);
}

/* Estilos para la imagen del cliente en testimonios */
.client-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-secundario);
  flex-shrink: 0;
}

.client-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.client-info h3 {
  margin-bottom: 0.3rem;
  font-size: 1.1rem;
  color: var(--color-texto);
}

.order-date {
  font-size: 0.9rem;
  color: #666;
}

.verified-badge {
  margin-left: auto;
  color: var(--color-secundario);
  font-size: 1rem;
}

Explicación del código: " Inicio.css - Estilos para Featured Pizzas, Ofertas y Testimonios "

/ inicio.css /
Comentario que indica el inicio del archivo de estilos para la sección principal del sitio, enfocado en pizzas destacadas, ofertas y testimonios.

.featured-pizzas {
padding: 4rem 2rem;
background: #fff;
}
Estilos para la sección de pizzas destacadas:

Se aplica un padding amplio (4rem vertical y 2rem horizontal) para espaciar el contenido.
Se establece un fondo blanco.
.section-header {
text-align: center;
margin-bottom: 3rem;
}
Encabezado de sección:

Se centra el texto y se añade un margen inferior de 3rem para separar visualmente la cabecera del contenido siguiente.
.section-subtitle {
color: var(--color-secundario);
font-size: 1.2rem;
margin-top: 0.5rem;
}
Subtítulo de sección:

Se usa una variable CSS para el color secundario, un tamaño de fuente de 1.2rem y un pequeño margen superior para separar del título.
.pizza-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
padding: 2rem;
}
Grid para la presentación de pizzas:

Se utiliza CSS Grid para crear una distribución responsiva.
Las columnas se adaptan automáticamente con un ancho mínimo de 250px.
Se aplica un espacio uniforme de 2rem entre elementos y un padding interno de 2rem.
.pizza-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
transition: transform 0.3s;
position: relative;
}
Tarjeta individual de pizza:

Se define un fondo blanco, bordes redondeados y se ocultan los desbordes.
Se agrega una sombra sutil para dar profundidad y una transición para animar transformaciones.
Se posiciona de forma relativa para poder ubicar elementos (como badges) de manera absoluta.
.pizza-card:hover {
transform: translateY(-5px);
}
Interacción de la tarjeta:

Al pasar el cursor, la tarjeta se desplaza 5px hacia arriba, creando un efecto de elevación.
.pizza-card img {
width: 100%;
height: 200px;
object-fit: cover;
}
Imagen de la pizza:

Se ajusta para ocupar el 100% del ancho del contenedor y se fija la altura a 200px.
Con "object-fit: cover" se asegura que la imagen mantenga su proporción y cubra el área.
.badge {
position: absolute;
top: 15px;
right: 15px;
background: var(--color-primario);
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: bold;
}
Etiqueta o badge en la tarjeta:

Posicionado de forma absoluta en la esquina superior derecha.
Se utiliza el color primario para el fondo, texto en blanco, y bordes redondeados para darle un estilo de etiqueta.
.card-body {
padding: 1.5rem;
text-align: center;
}
Cuerpo de la tarjeta:

Se agrega un padding interno de 1.5rem y se centra el texto.
.card-body h3 {
color: var(--color-texto);
margin-bottom: 0.5rem;
font-size: 1.4rem;
}
Título en el cuerpo de la tarjeta:

Se define el color mediante una variable de texto, se añade un pequeño margen inferior y se establece un tamaño de fuente moderado.
.ingredients {
color: #666;
font-size: 0.95rem;
min-height: 60px;
margin-bottom: 1rem;
line-height: 1.4;
}
Listado de ingredientes:

Se utiliza un tono gris (#666) y un tamaño de fuente ligeramente inferior.
Se asegura una altura mínima para mantener consistencia y se define la altura de línea para una buena legibilidad.
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 1rem;
}
Pie de la tarjeta:

Se organiza el contenido con flexbox, distribuyendo el espacio entre elementos y alineándolos verticalmente en el centro.
Se añade un margen superior para separar del contenido anterior.
.price {
color: var(--color-primario);
font-size: 1.5rem;
font-weight: bold;
}
Estilo del precio:

Se utiliza el color primario, se incrementa el tamaño de la fuente y se aplica negrita para destacar.
.btn-add {
background: var(--color-secundario);
color: white;
padding: 0.7rem 1.5rem;
border: none;
border-radius: 25px;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
}
Botón para añadir la pizza:

Se aplica un fondo con el color secundario, texto en blanco y un padding cómodo.
Se elimina el borde, se redondean las esquinas y se usa flexbox para centrar su contenido y espaciar iconos o texto.
Se incluye una transición para animar cambios en el estado hover.
.btn-add:hover {
background: #e76f51;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(247,143,30,0.3);
}
Efecto al pasar el cursor sobre el botón:

Se cambia el color de fondo a un tono diferente (#e76f51), se eleva ligeramente el botón y se añade una sombra para enfatizar la acción.
.btn-add i {
font-size: 1.1rem;
}
Estilo para los iconos dentro del botón:

Se ajusta el tamaño de la fuente para mantener coherencia visual.
Sección Ofertas
.offers {
background: var(--color-secundario);
color: white;
padding: 4rem 2rem;
text-align: center;
}
Estilos para la sección de ofertas:

Se usa el color secundario como fondo y el texto en blanco para buen contraste.
Se aplica un padding amplio y se centra el contenido.
Sección Testimonios
.testimonials {
padding: 4rem 2rem;
background: #fafafa;
}
Estilos para la sección de testimonios:

Se define un fondo claro (#fafafa) y se aplica un padding amplio para separar el contenido.
.testimonial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
padding: 2rem;
}
Grid para testimonios:

Se organiza el contenido en tres columnas iguales, con espacios de 2rem entre ellas y un padding interno de 2rem.
.testimonial-card {
background: #f8f8f8;
padding: 1.5rem;
border-radius: 10px;
text-align: center;
}
Tarjeta individual de testimonio:

Se establece un fondo claro (#f8f8f8), un padding adecuado, bordes redondeados y se centra el texto.
.rating {
color: #ffd700;
font-size: 1.2rem;
margin-bottom: 1rem;
}
Estilo de la calificación:

Se utiliza un color dorado (#ffd700) para simular estrellas, con un tamaño de fuente mayor y un margen inferior para separar del resto del contenido.
blockquote {
color: #444;
font-style: italic;
line-height: 1.6;
position: relative;
padding-left: 2rem;
}
Estilo para citas o testimonios en bloque:

Se define un color gris oscuro, un estilo de fuente en cursiva, y se ajusta la altura de línea.
Se posiciona de forma relativa y se añade un padding izquierdo para dar espacio al icono de comillas.
blockquote::before {
content: "“";
position: absolute;
left: 0;
top: -0.5rem;
font-size: 3rem;
color: var(--color-secundario);
}
Icono de comillas en las citas:

Se inserta un contenido antes del bloque, posicionado de forma absoluta, con un tamaño grande y el color secundario, para resaltar la cita.
Estilos para la imagen del cliente en testimonios
.client-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--color-secundario);
flex-shrink: 0;
}
Imagen del avatar del cliente:

Se fija un tamaño de 80px por lado y se redondea completamente para formar un círculo.
Se asegura que la imagen cubra el contenedor y se le añade un borde con el color secundario.
"flex-shrink: 0" evita que la imagen se reduzca en tamaños flexibles.
.client-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
Encabezado del testimonio:

Se organiza el contenido (avatar e información) en línea con flexbox, alineando verticalmente y dejando un espacio de 1rem entre ellos, con margen inferior para separación.
.client-info h3 {
margin-bottom: 0.3rem;
font-size: 1.1rem;
color: var(--color-texto);
}
Información del cliente:

Se aplica un pequeño margen inferior, un tamaño de fuente moderado y se utiliza la variable de color para el texto.
.order-date {
font-size: 0.9rem;
color: #666;
}
Fecha del pedido o testimonio:

Se define un tamaño de fuente menor y un tono gris para diferenciarlo del resto del texto.
.verified-badge {
margin-left: auto;
color: var(--color-secundario);
font-size: 1rem;
}
Insignia de verificación:

Se posiciona a la derecha mediante "margin-left: auto", se utiliza el color secundario y se ajusta el tamaño de fuente para resaltar el estado de verificado.

carro.js

Este archivo gestiona la interacción del carrito de compras en la web de la Pizzería Mamma Mia. Se configuran los eventos necesarios para abrir y cerrar el modal del carrito al hacer clic en el ícono correspondiente, en el botón de cierre o al pulsar fuera del contenido, garantizando una experiencia de usuario fluida y dinámica.

Cart.js - Lógica del Modal y Acciones del Carrito 

// cart.js
const cartIcon = document.querySelector('.cart-icon');
const cartModal = document.querySelector('.cart-modal');
const closeCart = document.querySelector('.close-cart');

if (cartIcon && cartModal && closeCart) {
  cartIcon.addEventListener('click', () => {
    cartModal.classList.add('show');
  });

  closeCart.addEventListener('click', () => {
    cartModal.classList.remove('show');
  });

  // Cierra el modal si se hace click fuera del contenido
  window.addEventListener('click', (e) => {
    if (e.target === cartModal) {
      cartModal.classList.remove('show');
    }
  });
}

Explicación del código: " Cart.js - Lógica del Modal y Acciones del Carrito "

// cart.js
Comentario que indica el inicio del archivo JavaScript encargado de la funcionalidad del carrito.

const cartIcon = document.querySelector('.cart-icon');
Se selecciona el elemento del DOM con la clase 'cart-icon' (ícono del carrito) y se asigna a la constante 'cartIcon'.

const cartModal = document.querySelector('.cart-modal');
Se selecciona el elemento del DOM con la clase 'cart-modal' (modal o ventana emergente del carrito) y se asigna a la constante 'cartModal'.

const closeCart = document.querySelector('.close-cart');
Se selecciona el elemento del DOM con la clase 'close-cart' (botón o icono para cerrar el modal del carrito) y se asigna a la constante 'closeCart'.

if (cartIcon && cartModal && closeCart) {
Se verifica que los tres elementos existen en el DOM antes de añadir cualquier evento, evitando errores en caso de que alguno no esté presente.

cartIcon.addEventListener('click', () => {
cartModal.classList.add('show');
});
Al hacer click en el ícono del carrito, se añade la clase 'show' al modal, lo que hace que se muestre en la pantalla.

closeCart.addEventListener('click', () => {
cartModal.classList.remove('show');
});
Al hacer click en el botón para cerrar el carrito, se elimina la clase 'show' del modal, ocultándolo de la vista.

// Cierra el modal si se hace click fuera del contenido
window.addEventListener('click', (e) => {
if (e.target === cartModal) {
cartModal.classList.remove('show');
}
});
Se añade un listener al objeto window para detectar clicks en cualquier parte de la ventana;
si el elemento clickeado es exactamente el modal (es decir, se hizo click fuera del contenido interno), se quita la clase 'show' y se cierra el modal. }
Esta estructura condicional garantiza que los listeners solo se configuren si los elementos necesarios están presentes en la página.

Este archivo gestiona la interacción del menú de navegación en la web de la Pizzería Mamma Mia. Se encarga de activar y desactivar el menú al hacer clic en el ícono de hamburguesa, además de cerrarlo al detectar clics fuera de su área, asegurando una experiencia de usuario fluida y adaptable a dispositivos móviles.

Navigation.js - Control del Menú Hamburguesa y Comportamiento de la Navegación 

// navigation.js
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');

if (hamburger && navMenu) {
  hamburger.addEventListener('click', () => {
    navMenu.classList.toggle('active');
  });

  // Cerrar menú al hacer click fuera
  document.addEventListener('click', (e) => {
    if (!hamburger.contains(e.target) && !navMenu.contains(e.target)) {
      navMenu.classList.remove('active');
    }
  });
}

Explicación del código: " Navigation.js - Control del Menú Hamburguesa y Comportamiento de la Navegación "

/ navigation.js /
Comentario que indica el inicio del archivo JavaScript para el control de la navegación.

const hamburger = document.querySelector('.hamburger');
Se selecciona el elemento del DOM con la clase 'hamburger' y se almacena en la constante hamburger.

const navMenu = document.querySelector('.nav-menu');
Se selecciona el elemento del DOM con la clase 'nav-menu' y se asigna a la constante navMenu.

if (hamburger && navMenu) {
Se verifica que ambos elementos (hamburger y navMenu) existan en el DOM antes de añadir eventos.

hamburger.addEventListener('click', () => {
navMenu.classList.toggle('active');
});
Se añade un evento de clic al elemento hamburger.

Al hacer clic, se alterna la clase 'active' en el navMenu, mostrando u ocultando el menú de navegación.
// Cerrar menú al hacer click fuera
document.addEventListener('click', (e) => {
if (!hamburger.contains(e.target) && !navMenu.contains(e.target)) {
navMenu.classList.remove('active');
}
});
Se añade un evento de clic al documento completo para cerrar el menú.

Si el clic se realiza fuera de los elementos hamburger y navMenu, se remueve la clase 'active' del navMenu, cerrando el menú.
}
Finaliza la condición que asegura que los elementos necesarios existan antes de asignar los eventos."

pizzas_classicas.html

Este archivo HTML define la estructura principal de la sección "Pizzas Clásicas" de la Pizzería Mamma Mia. En él se exhibe un menú interactivo que presenta pizzas tradicionales, incluyendo imágenes, descripciones, ingredientes, opciones de tamaño y precios, así como botones para añadir productos al carrito. Además, se integra un footer con información de horarios, contacto y redes sociales, completando la experiencia del usuario.

pizzas_classicas.html - Main: Menú Clásico (Pizzas Clásicas) 

<!DOCTYPE html>
<html lang="es">
  <!-- Plantilla Bloque 1: Declaración y Encabezado -->
  <!-- El bloque 1 se coloca en el <head> e incluye la declaración del documento, 
       meta tags, título, enlaces a hojas de estilo y Font Awesome -->
  <head>
    <!-- Código del Bloque 1 va aquí -->
  </head>
  <body>
    <!-- Plantilla Bloque 2: Encabezado y Navegación -->
    <!-- El bloque 2 se coloca al inicio del <body> e incluye el header con la barra de navegación -->
    <!-- Código del Bloque 2 va aquí -->
    <main>
      <!-- SECCIÓN CLASSIC MENU: Pizzas Clásicas -->
      <section class="classic-menu">
        <div class="section-header">
          <h2>Pizzas Clásicas</h2>
          <p class="section-subtitle">Las recetas tradicionales que nos hicieron famosos</p>
        </div>
        <div class="menu-grid">
          <!-- Pizza 1 -->
          <div class="menu-item">
            <div class="item-header">
              <img src="images/pizza-margarita.jpg" alt="Pizza Pepperoni" class="pizza-image" />
              <div class="classic-badge">Clásica</div>
            </div>
            <div class="item-body">
              <h3>
                Pepperoni Tradicional
                <span class="price">$14.99</span>
              </h3>
              <div class="ingredients-list">
                <span>Ingredientes:</span>
                <ul>
                  <li>Doble pepperoni</li>
                  <li>Queso mozzarella</li>
                  <li>Salsa de tomate artesanal</li>
                </ul>
              </div>
              <div class="size-selector">
                <button class="btn-size active" data-size="mediana">Mediana</button>
                <button class="btn-size" data-size="familiar">Familiar (+$4)</button>
              </div>
              <button class="btn-add">
                <i class="fas fa-cart-plus"></i> Añadir al Carrito
              </button>
            </div>
          </div>
          
          <!-- Pizza 2 -->
          <div class="menu-item">
            <div class="item-header">
              <img src="images/pizza-margarita.jpg" alt="Pizza Hawaiana" class="pizza-image" />
              <div class="classic-badge">Clásica</div>
            </div>
            <div class="item-body">
              <h3>
                Hawaiana Original
                <span class="price">$15.99</span>
              </h3>
              <div class="ingredients-list">
                <span>Ingredientes:</span>
                <ul>
                  <li>Jamón premium</li>
                  <li>Piña caramelizada</li>
                  <li>Queso gratinado</li>
                </ul>
              </div>
              <div class="size-selector">
                <button class="btn-size active" data-size="mediana">Mediana</button>
                <button class="btn-size" data-size="familiar">Familiar (+$4)</button>
              </div>
              <button class="btn-add">
                <i class="fas fa-cart-plus"></i> Añadir al Carrito
              </button>
            </div>
          </div>
          <!-- Agrega más pizzas clásicas según sea necesario -->
        </div>
      </section>

    <!-- Plantilla Bloque 4: Modal del Carrito y Funcionalidad JavaScript -->
    <!-- Se cololca al temrinarl el main-->
</html>

Explicación del código: " pizzas_classicas.html - Main: Menú Clásico (Pizzas Clásicas) "

<!DOCTYPE html>
Esta línea declara el documento como HTML5.

<html lang="es"> Aquí se inicia el documento HTML y se establece que el idioma es español. <!-- Plantilla Bloque 1: Declaración y Encabezado -->
Este comentario indica que el bloque siguiente es para la declaración y encabezado.

<!-- El bloque 1 se coloca en el <head> e incluye la declaración del documento, meta tags, título, enlaces a hojas de estilo y Font Awesome -->
El comentario detalla que dentro de la sección <head> se incluirán meta datos, título, estilos y enlaces a Font Awesome.

<head> Se abre la sección del encabezado del documento. <!-- Código del Bloque 1 va aquí -->
Aquí se insertará el contenido del bloque 1, como los meta tags y enlaces a estilos.

</head> Se cierra la sección del encabezado. <body> Se inicia el cuerpo del documento, donde estará el contenido visible de la página. <!-- Plantilla Bloque 2: Encabezado y Navegación -->
Comentario que indica el comienzo del bloque destinado al encabezado y navegación.

<!-- El bloque 2 se coloca al inicio del <body> e incluye el header con la barra de navegación -->
Este comentario explica que en esta sección se ubicará el header y la barra de navegación.

<!-- Código del Bloque 2 va aquí -->
Indicador para insertar el código correspondiente al encabezado y la navegación.

<main> Se abre el contenido principal de la página. <!-- SECCIÓN CLASSIC MENU: Pizzas Clásicas -->
Comentario que introduce la sección del menú de pizzas clásicas.

<section class="classic-menu"> Se define una sección con la clase "classic-menu" para agrupar el contenido relacionado con las pizzas clásicas. <div class="section-header"> Contenedor para el encabezado de esta sección. <h2>Pizzas Clásicas</h2> Se muestra el título de la sección. <p class="section-subtitle">Las recetas tradicionales que nos hicieron famosos</p> Subtítulo que brinda una breve descripción de la sección. </div> Cierre del contenedor del encabezado de la sección. <div class="menu-grid"> Contenedor que organiza en una cuadrícula los elementos del menú. <!-- Pizza 1 -->
Comentario que marca el inicio del bloque para la primera pizza.

<div class="menu-item"> Contenedor que agrupa los elementos correspondientes a una pizza. <div class="item-header"> Se inicia el contenedor del encabezado del ítem, generalmente para la imagen. <img src="images/pizza-margarita.jpg" alt="Pizza Pepperoni" class="pizza-image" /> Muestra la imagen de la pizza; el atributo alt describe la imagen y se le asigna la clase para estilos. <div class="classic-badge">Clásica</div> Etiqueta que indica que esta pizza es de tipo "Clásica". </div> Cierre del contenedor del encabezado del ítem. <div class="item-body"> Se abre el contenedor que contiene la información y detalles de la pizza. <h3> Inicia el título del producto.
Pepperoni Tradicional Nombre de la pizza.

<span class="price">$14.99</span> Dentro del título, se muestra el precio de la pizza.

</h3> Cierre del título del producto. <div class="ingredients-list"> Contenedor que agrupa la lista de ingredientes.
<span>Ingredientes:</span> Texto que introduce la lista de ingredientes.

<ul> Se abre una lista sin orden para detallar los ingredientes. <li>Doble pepperoni</li> Primer ingrediente. <li>Queso mozzarella</li> Segundo ingrediente. <li>Salsa de tomate artesanal</li> Tercer ingrediente. </ul> Cierre de la lista de ingredientes. </div> Cierre del contenedor de ingredientes. <div class="size-selector"> Contenedor para los botones que permiten seleccionar el tamaño de la pizza.
<button class="btn-size active" data-size="mediana">Mediana</button> Botón para seleccionar el tamaño mediano, marcado como activo por defecto.

<button class="btn-size" data-size="familiar">Familiar (+$4)</button> Botón para seleccionar el tamaño familiar, que añade un recargo.

</div> Cierre del contenedor del selector de tamaño. <button class="btn-add"> Botón para añadir la pizza al carrito.
<i class="fas fa-cart-plus"></i> Añadir al Carrito Dentro del botón se utiliza un ícono (Font Awesome) y el texto "Añadir al Carrito".

</button> Cierre del botón para añadir al carrito. </div> Cierre del contenedor del cuerpo del ítem. </div> Cierre del contenedor correspondiente a la primera pizza. <!-- Pizza 2 -->
Comentario que indica el comienzo del bloque para la segunda pizza.

<div class="menu-item"> Contenedor que agrupa los elementos de la segunda pizza. <div class="item-header"> Se abre el contenedor del encabezado del ítem para la segunda pizza. <img src="images/pizza-margarita.jpg" alt="Pizza Hawaiana" class="pizza-image" /> Muestra la imagen de la segunda pizza, con el atributo alt que indica "Pizza Hawaiana". <div class="classic-badge">Clásica</div> Etiqueta que indica que esta pizza también es "Clásica". </div> Cierre del contenedor del encabezado del ítem. <div class="item-body"> Se inicia el contenedor con los detalles de la segunda pizza. <h3> Inicia el título del producto.
Hawaiana Original Nombre de la segunda pizza.

<span class="price">$15.99</span> Precio de la segunda pizza mostrado dentro del título.

</h3> Cierre del título del producto. <div class="ingredients-list"> Contenedor para la lista de ingredientes de la segunda pizza.
<span>Ingredientes:</span> Texto que introduce la lista de ingredientes.

<ul> Se abre la lista sin orden para los ingredientes. <li>Jamón premium</li> Primer ingrediente. <li>Piña caramelizada</li> Segundo ingrediente. <li>Queso gratinado</li> Tercer ingrediente. </ul> Cierre de la lista de ingredientes. </div> Cierre del contenedor de ingredientes. <div class="size-selector"> Contenedor para los botones de selección de tamaño de la segunda pizza.
<button class="btn-size active" data-size="mediana">Mediana</button> Botón para elegir el tamaño mediano, marcado por defecto.

<button class="btn-size" data-size="familiar">Familiar (+$4)</button> Botón para seleccionar el tamaño familiar, que incluye un recargo.

</div> Cierre del contenedor del selector de tamaño. <button class="btn-add"> Botón para añadir la segunda pizza al carrito.
<i class="fas fa-cart-plus"></i> Añadir al Carrito Incluye el ícono y el texto para la acción de añadir al carrito.

</button> Cierre del botón para añadir al carrito. </div> Cierre del contenedor del cuerpo del ítem de la segunda pizza. </div> Cierre del contenedor correspondiente a la segunda pizza. <!-- Agrega más pizzas clásicas según sea necesario -->
Comentario que sugiere la posibilidad de agregar más pizzas siguiendo la misma estructura.

</div> Cierre del contenedor de la cuadrícula del menú. </section> Cierre de la sección "classic-menu". <!-- Plantilla Bloque 4: Modal del Carrito y Funcionalidad JavaScript -->
Comentario que señala el bloque destinado al modal del carrito y el código JavaScript relacionado.

<!-- Se cololca al temrinarl el main-->
Comentario que indica la posición del bloque (al final del contenido principal).

</html> Cierre del documento HTML.

pizzas_classicas.css

Este archivo define los estilos para la sección de menú clásico de la Pizzería Mamma Mia. Se establecen reglas para el diseño y la presentación de la sección, incluyendo el espaciado, el fondo, la cuadrícula de elementos y los detalles visuales de cada ítem, como la tipografía y los botones interactivos, garantizando un aspecto atractivo y coherente en todo el sitio.

pizzas_classicas.css - Estilos de Menú Clásico, Sección y Componentes de Items 

.classic-menu {
    padding: 4rem 2rem;
    background: #fff9f5;
  }
  
  .classic-menu .section-header {
    text-align: center;
    margin-bottom: 3rem;
  }
  
  .classic-menu .section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-primario);
  }
  
  .classic-menu .section-subtitle {
    color: var(--color-secundario);
    font-size: 1.2rem;
    margin-top: 0.5rem;
  }
  
  .menu-grid {
    display: grid;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
  
  .menu-item {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
  }
  
  .menu-item:hover {
    transform: translateY(-5px);
  }
  
  .item-header {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
  }
  
  .item-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .classic-badge {
    background: var(--color-primario);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    position: absolute;
    top: 10px;
    right: 10px;
  }
  
  .item-body {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  
  .item-body h3 {
    color: var(--color-texto);
    font-size: 1.6rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .ingredients-list {
    margin: 1.5rem 0;
    padding: 1rem;
    background: #f8f8f8;
    border-radius: 10px;
  }
  
  .ingredients-list span {
    display: block;
    color: var(--color-primario);
    font-weight: bold;
    margin-bottom: 0.5rem;
  }
  
  .ingredients-list ul {
    list-style: none;
    padding-left: 1rem;
  }
  
  .ingredients-list li {
    position: relative;
    margin-bottom: 0.3rem;
    padding-left: 1.5rem;
  }
  
  .ingredients-list li::before {
    content: "•";
    color: var(--color-secundario);
    position: absolute;
    left: 0;
  }
  
  .size-selector {
    display: flex;
    gap: 1rem;
    margin: 1.5rem 0;
  }
  
  .btn-size {
    padding: 0.5rem 1.5rem;
    border: 2px solid #eee;
    border-radius: 25px;
    background: none;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .btn-size.active {
    border-color: var(--color-primario);
    background: var(--color-primario);
    color: white;
  }
  
  .btn-add {
    background: var(--color-secundario);
    color: white;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
    margin-top: auto;
  }
  
  .btn-add i {
    margin-right: 0.5rem;
  }

Explicación del código: " pizzas_classicas.css - Estilos de Menú Clásico, Sección y Componentes de Items "

classic-menu /
Comentario que indica el inicio del bloque de estilos para la sección del menú clásico.
.classic-menu {
padding: 4rem 2rem;
background: #fff9f5;
}
Se define el contenedor principal del menú clásico:
Se aplica un padding amplio (4rem vertical y 2rem horizontal) para dar espacio interno.
Se establece un fondo con un tono muy claro (color #fff9f5).
.classic-menu .section-header {
text-align: center;
margin-bottom: 3rem;
}
Los estilos para el encabezado de la sección dentro del menú:
Se centra el texto.
Se añade un margen inferior de 3rem para separar visualmente del contenido siguiente.
.classic-menu .section-header h2 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
color: var(--color-primario);
}
El título (h2) del encabezado de la sección:
Se define un tamaño de fuente grande (2.5rem) y un pequeño margen inferior.
El color del texto se asigna mediante la variable del color primario.
.classic-menu .section-subtitle {
color: var(--color-secundario);
font-size: 1.2rem;
margin-top: 0.5rem;
}
El subtítulo de la sección se estiliza:
Con un color secundario y un tamaño de fuente moderado (1.2rem).
Se añade un margen superior para separar del título.
.menu-grid {
display: grid;
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
El contenedor que organiza los elementos del menú en una cuadrícula:
Se usa CSS Grid para disponer los items con un espacio de 2rem entre ellos.
Se limita el ancho máximo a 1200px y se centra horizontalmente.
La propiedad grid-template-columns define columnas flexibles que se adaptan automáticamente, con un mínimo de 300px por columna.
.menu-item {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
transition: transform 0.3s ease;
}
Cada item del menú se presenta como una tarjeta:
Se establece un fondo blanco, bordes redondeados y se ocultan los desbordes para que el contenido se ajuste.
Se aplica una sombra sutil para dar profundidad.
Se usa flexbox en columna para organizar el contenido interno y se añade una transición para animaciones.
.menu-item:hover {
transform: translateY(-5px);
}
Al pasar el cursor sobre un item:
Se aplica una transformación que eleva ligeramente el elemento (sube 5px) para resaltar la interacción.
.item-header {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
La cabecera de cada item (usualmente para mostrar una imagen):
Se establece posición relativa para ubicar elementos posicionados internamente.
Se fija una altura de 200px y se ocultan los elementos que excedan el área.
.item-header img {
width: 100%;
height: 100%;
object-fit: cover;
}
La imagen dentro del encabezado:
Ocupa el 100% de la anchura y altura del contenedor.
Con "object-fit: cover" se asegura que la imagen se recorte y se mantenga bien proporcionada.
.classic-badge {
background: var(--color-primario);
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.9rem;
position: absolute;
top: 10px;
right: 10px;
}
El distintivo o "badge" dentro de cada item:
Se asigna con el color primario de fondo y texto en blanco.
Tiene un padding reducido, bordes muy redondeados y un tamaño de fuente pequeño.
Se posiciona de forma absoluta en la esquina superior derecha.
.item-body {
padding: 2rem;
display: flex;
flex-direction: column;
flex: 1;
}
El cuerpo del item, donde se muestra la información:
Se le aplica un padding interno de 2rem.
Se organiza en columna mediante flexbox y se extiende para ocupar el espacio disponible.
.item-body h3 {
color: var(--color-texto);
font-size: 1.6rem;
margin-bottom: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
El título del item:
Usa el color definido para el texto y un tamaño de 1.6rem, con margen inferior para separar del contenido siguiente.
Se usa flexbox para distribuir elementos (por ejemplo, el nombre del producto y algún precio o ícono) de manera equilibrada.
.ingredients-list {
margin: 1.5rem 0;
padding: 1rem;
background: #f8f8f8;
border-radius: 10px;
}
La lista de ingredientes del producto:
Se separa del contenido superior e inferior con márgenes verticales.
Se añade un padding interno, un fondo gris claro y bordes redondeados para destacar la sección.
.ingredients-list span {
display: block;
color: var(--color-primario);
font-weight: bold;
margin-bottom: 0.5rem;
}
El texto destacado (por ejemplo, un título) dentro de la lista:
Se muestra en bloque, con color primario, en negrita y con un pequeño margen inferior.
.ingredients-list ul {
list-style: none;
padding-left: 1rem;
}
La lista sin viñetas de ingredientes:
Se elimina el estilo predeterminado de lista y se añade un padding a la izquierda para alinear los elementos.
.ingredients-list li {
position: relative;
margin-bottom: 0.3rem;
padding-left: 1.5rem;
}
Cada elemento de la lista de ingredientes:
Se posiciona de forma relativa para permitir la inserción de un ítem personalizado.
Se separa con un margen inferior y se reserva espacio a la izquierda.
.ingredients-list li::before {
content: "•";
color: var(--color-secundario);
position: absolute;
left: 0;
}
Se añade un marcador personalizado antes de cada ingrediente:
Se muestra un punto (•) con el color secundario, posicionado absolutamente a la izquierda.
.size-selector {
display: flex;
gap: 1rem;
margin: 1.5rem 0;
}
El contenedor para seleccionar tamaños (por ejemplo, de porciones o porciones de menú):
Se utiliza flexbox para organizar los botones en línea, con un espacio de 1rem entre ellos y márgenes verticales.
.btn-size {
padding: 0.5rem 1.5rem;
border: 2px solid #eee;
border-radius: 25px;
background: none;
cursor: pointer;
transition: all 0.3s ease;
}
El botón para seleccionar un tamaño:
Tiene un padding cómodo, un borde de 2px en color claro, y bordes redondeados.
Se elimina cualquier fondo predeterminado y se activa el cursor pointer.
Se añade una transición para suavizar cualquier cambio de estado.
.btn-size.active {
border-color: var(--color-primario);
background: var(--color-primario);
color: white;
}
Cuando se activa un botón de tamaño:
Se cambia el color del borde y el fondo al color primario, y el texto se vuelve blanco para resaltar la selección.
.btn-add {
background: var(--color-secundario);
color: white;
padding: 0.8rem 1.5rem;
border: none;
border-radius: 25px;
cursor: pointer;
width: 100%;
transition: all 0.3s ease;
margin-top: auto;
}
El botón para añadir el item (por ejemplo, al carrito):
Se asigna un fondo con el color secundario y texto en blanco.
Se aplica un padding adecuado, se eliminan bordes y se redondean las esquinas.
Se establece un cursor pointer, ocupa el 100% del ancho disponible y se añade una transición para animaciones.
El margen superior automático empuja el botón hacia el final del contenedor, asegurando su posición inferior.
.btn-add i {
margin-right: 0.5rem;
}
Si el botón incluye un ícono (elemento <i>):
Se añade un margen a la derecha para separar el ícono del texto y mejorar la legibilidad."

menu_especialidades.html

Este archivo estructura la sección principal de la web de la Pizzería Mamma Mia, presentando las Pizzas Especiales con sus descripciones, imágenes y opciones interactivas, así como el pie de página que muestra los horarios, datos de contacto y enlaces a redes sociales, ofreciendo una experiencia completa y fluida al usuario.

PlantillaHTML - Declaración, Encabezado, Navegación y Sección de Pizzas Especiales 

<!DOCTYPE html>
<html lang="es">
  <!-- Plantilla Bloque 1: Declaración y Encabezado -->
  <!-- El bloque 1 se coloca en el <head> e incluye la declaración del documento, 
       meta tags, título, enlaces a hojas de estilo y Font Awesome -->
  <head>
    <!-- Código del Bloque 1 va aquí -->
  </head>
  <body>
    <!-- Plantilla Bloque 2: Encabezado y Navegación -->
    <!-- El bloque 2 se coloca al inicio del <body> e incluye el header con la barra de navegación -->
    <!-- Código del Bloque 2 va aquí -->
    
    <main>
      <!-- SECCIÓN PIZZAS ESPECIALES -->
      <section class="specialty-menu">
        <div class="section-header">
          <h2>Pizzas Especiales</h2>
          <p class="section-subtitle">Creaciones únicas de nuestro chef</p>
        </div>
        <div class="menu-grid">
          <!-- Pizza 1 -->
          <div class="menu-item specialty-item">
            <div class="item-header">
              <img src="images/pizza-margarita.jpg" alt="Pizza de Trufa" class="pizza-image" />
              <div class="badge specialty-badge">Especialidad</div>
              <div class="chef-note">⭐ Recomendación del Chef</div>
            </div>
            <div class="item-body">
              <h3>
                Trufa Negra & Hongos
                <span class="price">$22.99</span>
              </h3>
              <div class="ingredients-list">
                <span>Ingredientes Premium:</span>
                <ul>
                  <li>Trufa negra fresca</li>
                  <li>Mezcla de hongos silvestres</li>
                  <li>Queso brie fundido</li>
                  <li>Virutas de parmesano</li>
                </ul>
              </div>
              <div class="size-selector">
                <button class="btn-size active" data-size="mediana">Mediana</button>
                <button class="btn-size" data-size="familiar">Familiar (+$6)</button>
              </div>
              <button class="btn-add special-add">
                <i class="fas fa-plus-circle"></i> Añadir Experiencia
              </button>
            </div>
          </div>
          <!-- Pizza 2 -->
          <div class="menu-item specialty-item">
            <div class="item-header">
              <img src="images/pizza-margarita.jpg" alt="Pizza de Mariscos" class="pizza-image" />
              <div class="badge specialty-badge">Especialidad</div>
            </div>
            <div class="item-body">
              <h3>
                Delicia Marina
                <span class="price">$24.99</span>
              </h3>
              <div class="ingredients-list">
                <span>Ingredientes Premium:</span>
                <ul>
                  <li>Camarones salvajes</li>
                  <li>Vieiras frescas</li>
                  <li>Salsa bisque de langosta</li>
                  <li>Albahaca limón</li>
                </ul>
              </div>
              <div class="size-selector">
                <button class="btn-size active" data-size="mediana">Mediana</button>
                <button class="btn-size" data-size="familiar">Familiar (+$6)</button>
              </div>
              <button class="btn-add special-add">
                <i class="fas fa-plus-circle"></i> Añadir Experiencia
              </button>
            </div>
          </div>
          <!-- Agrega más pizzas especiales según sea necesario -->
        </div>
      </section>
    </main>

    <!-- Plantilla Bloque 4: Modal del Carrito y Funcionalidad JavaScript -->
    <!-- Se cololca al temrinarl el main-->
</html>

Explicación del código: " PlantillaHTML - Declaración, Encabezado, Navegación y Sección de Pizzas Especiales "

<!DOCTYPE html>
Esta línea declara el documento como HTML5.

<html lang="es"> Se inicia el documento HTML y se especifica que el idioma es español. <!-- Plantilla Bloque 1: Declaración y Encabezado -->
Comentario que indica el inicio del bloque para la declaración y el encabezado del documento.

<!-- El bloque 1 se coloca en el <head> e incluye la declaración del documento, meta tags, título, enlaces a hojas de estilo y Font Awesome -->
Explica que en la sección <head> se incluirán elementos esenciales como meta tags, título, enlaces a estilos y a Font Awesome.

<head> Se abre la sección del encabezado. <!-- Código del Bloque 1 va aquí -->
Lugar reservado para insertar el contenido del bloque 1 (meta datos, título, etc.).

</head> Cierre de la sección del encabezado. <body> Inicio del cuerpo del documento, donde se coloca el contenido visible de la página. <!-- Plantilla Bloque 2: Encabezado y Navegación -->
Comentario que marca el inicio del bloque destinado al encabezado y la navegación.

<!-- El bloque 2 se coloca al inicio del <body> e incluye el header con la barra de navegación -->
Indica que en este bloque se insertará el código correspondiente al header y a la barra de navegación.

<!-- Código del Bloque 2 va aquí -->
Lugar para incluir el código del encabezado y la navegación.

<main> Se abre la sección principal de la página. <!-- SECCIÓN PIZZAS ESPECIALES -->
Comentario que introduce la sección del menú de pizzas especiales.

<section class="specialty-menu"> Se define una sección con la clase "specialty-menu" para agrupar las pizzas especiales. <div class="section-header"> Contenedor para el encabezado de esta sección. <h2>Pizzas Especiales</h2> Título de la sección que muestra "Pizzas Especiales". <p class="section-subtitle">Creaciones únicas de nuestro chef</p> Subtítulo que describe la sección, resaltando las creaciones exclusivas del chef. </div> Cierre del contenedor del encabezado de la sección. <div class="menu-grid"> Contenedor que organiza los elementos del menú en una cuadrícula. <!-- Pizza 1 -->
Comentario que indica el inicio del bloque para la primera pizza especial.

<div class="menu-item specialty-item"> Contenedor que agrupa los elementos correspondientes a la primera pizza especial y se identifica con las clases "menu-item" y "specialty-item". <div class="item-header"> Contenedor del encabezado del ítem, generalmente utilizado para mostrar la imagen. <img src="images/pizza-margarita.jpg" alt="Pizza de Trufa" class="pizza-image" /> Muestra la imagen de la pizza; el atributo alt describe la imagen y se aplica la clase para estilos. <div class="badge specialty-badge">Especialidad</div> Etiqueta que indica que esta pizza es una especialidad. <div class="chef-note">⭐ Recomendación del Chef</div> Nota especial que resalta la recomendación del chef, acompañada de un ícono. </div> Cierre del contenedor del encabezado del ítem. <div class="item-body"> Inicia el contenedor que contiene la información y detalles de la pizza. <h3> Inicio del título del producto.
Trufa Negra & Hongos
Nombre de la pizza especial.

<span class="price">$22.99</span>
Dentro del título se muestra el precio de la pizza.

</h3> Cierre del título del producto. <div class="ingredients-list"> Contenedor para la lista de ingredientes premium.
<span>Ingredientes Premium:</span>
Texto introductorio para la lista de ingredientes.

<ul> Inicio de una lista sin orden para detallar los ingredientes. <li>Trufa negra fresca</li> Primer ingrediente premium. <li>Mezcla de hongos silvestres</li> Segundo ingrediente premium. <li>Queso brie fundido</li> Tercer ingrediente premium. <li>Virutas de parmesano</li> Cuarto ingrediente premium. </ul> Cierre de la lista de ingredientes. </div> Cierre del contenedor de ingredientes. <div class="size-selector"> Contenedor para los botones de selección del tamaño de la pizza.
<button class="btn-size active" data-size="mediana">Mediana</button>
Botón que permite seleccionar el tamaño mediano, marcado como activo por defecto.

<button class="btn-size" data-size="familiar">Familiar (+$6)</button>
Botón para seleccionar el tamaño familiar, que incluye un recargo de $6.

</div> Cierre del contenedor del selector de tamaño. <button class="btn-add special-add"> Botón para añadir la pizza al carrito, con clases que indican su función especial.
<i class="fas fa-plus-circle"></i> Añadir Experiencia
Dentro del botón se incluye un ícono de Font Awesome y el texto que invita a "Añadir Experiencia".

</button> Cierre del botón de añadir. </div> Cierre del contenedor del cuerpo del ítem. </div> Cierre del contenedor de la primera pizza especial. <!-- Pizza 2 -->
Comentario que indica el inicio del bloque para la segunda pizza especial.

<div class="menu-item specialty-item"> Contenedor que agrupa los elementos correspondientes a la segunda pizza especial. <div class="item-header"> Contenedor del encabezado del ítem para la segunda pizza. <img src="images/pizza-margarita.jpg" alt="Pizza de Mariscos" class="pizza-image" /> Muestra la imagen de la segunda pizza; el atributo alt especifica "Pizza de Mariscos". <div class="badge specialty-badge">Especialidad</div> Etiqueta que indica que esta pizza es una especialidad. </div> Cierre del contenedor del encabezado del ítem. <div class="item-body"> Inicia el contenedor con los detalles de la segunda pizza especial. <h3> Inicio del título del producto.
Delicia Marina
Nombre de la segunda pizza especial.

<span class="price">$24.99</span>
Muestra el precio de la pizza dentro del título.

</h3> Cierre del título del producto. <div class="ingredients-list"> Contenedor para la lista de ingredientes premium de la segunda pizza.
<span>Ingredientes Premium:</span>
Texto que introduce la lista de ingredientes.

<ul> Inicio de la lista sin orden para detallar los ingredientes. <li>Camarones salvajes</li> Primer ingrediente premium. <li>Vieiras frescas</li> Segundo ingrediente premium. <li>Salsa bisque de langosta</li> Tercer ingrediente premium. <li>Albahaca limón</li> Cuarto ingrediente premium. </ul> Cierre de la lista de ingredientes. </div> Cierre del contenedor de ingredientes. <div class="size-selector"> Contenedor para los botones de selección de tamaño de la segunda pizza.
<button class="btn-size active" data-size="mediana">Mediana</button>
Botón para seleccionar el tamaño mediano, marcado como activo.

<button class="btn-size" data-size="familiar">Familiar (+$6)</button>
Botón para elegir el tamaño familiar, con un recargo de $6.

</div> Cierre del contenedor del selector de tamaño. <button class="btn-add special-add"> Botón para añadir la segunda pizza al carrito, con clases que resaltan su función especial.
<i class="fas fa-plus-circle"></i> Añadir Experiencia
Dentro del botón se utiliza un ícono y el texto "Añadir Experiencia".

</button> Cierre del botón para añadir. </div> Cierre del contenedor del cuerpo del ítem de la segunda pizza. </div> Cierre del contenedor correspondiente a la segunda pizza especial. <!-- Agrega más pizzas especiales según sea necesario -->
Comentario que sugiere la posibilidad de agregar más pizzas especiales siguiendo la misma estructura.

</div> Cierre del contenedor de la cuadrícula del menú. </section> Cierre de la sección "specialty-menu". </main> Cierre del contenido principal. <!-- Plantilla Bloque 4: Modal del Carrito y Funcionalidad JavaScript -->
Comentario que indica el bloque destinado al modal del carrito y la funcionalidad JavaScript.

<!-- Se cololca al temrinarl el main-->
Comentario que señala la posición del bloque (al final del contenido principal).

</html> Cierre del documento HTML.

menu_especialidades.css

Este archivo define los estilos para la sección del menú de especialidades de la Pizzería Mamma Mia, estableciendo el diseño de la presentación de platos destacados. Se configuran estructuras en cuadrícula, efectos de interacción, y estilos específicos para elementos como insignias, notas del chef y botones, garantizando una experiencia visual atractiva y coherente en todo el sitio.

specialty_menu.css - Estilos de Menú de Especialidades, Grid y Detalles del Plato 

.specialty-menu {
    padding: 4rem 2rem;
    background: #fff9f5;
  }
  
  .specialty-menu .section-header {
    text-align: center;
    margin-bottom: 3rem;
  }
  
  .specialty-menu .section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-primario);
  }
  
  .specialty-menu .section-subtitle {
    color: var(--color-secundario);
    font-size: 1.2rem;
    margin-top: 0.5rem;
  }
  
  .menu-grid {
    display: grid;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
  
  .menu-item {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
  }
  
  .menu-item:hover {
    transform: translateY(-5px);
  }
  
  .item-header {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
  }
  
  .item-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Elementos específicos para las especialidades */
  .specialty-badge {
    background: var(--color-primario);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    position: absolute;
    top: 10px;
    left: 10px;
  }
  
  .chef-note {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: var(--color-secundario);
    color: white;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 0.8rem;
  }
  
  .item-body {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  
  .item-body h3 {
    color: var(--color-texto);
    font-size: 1.6rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .ingredients-list {
    margin: 1.5rem 0;
    padding: 1rem;
    background: #f8f8f8;
    border-radius: 10px;
  }
  
  .ingredients-list span {
    display: block;
    color: var(--color-primario);
    font-weight: bold;
    margin-bottom: 0.5rem;
  }
  
  .ingredients-list ul {
    list-style: none;
    padding-left: 1rem;
  }
  
  .ingredients-list li {
    position: relative;
    margin-bottom: 0.3rem;
    padding-left: 1.5rem;
  }
  
  .ingredients-list li::before {
    content: "•";
    color: var(--color-secundario);
    position: absolute;
    left: 0;
  }
  
  .size-selector {
    display: flex;
    gap: 1rem;
    margin: 1.5rem 0;
  }
  
  .btn-size {
    padding: 0.5rem 1.5rem;
    border: 2px solid #eee;
    border-radius: 25px;
    background: none;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .btn-size.active {
    border-color: var(--color-primario);
    background: var(--color-primario);
    color: white;
  }
  
  .btn-add {
    background: var(--color-secundario);
    color: white;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
    margin-top: auto;
  }
  
  .btn-add i {
    margin-right: 0.5rem;
  }
  
  /* Para botones especiales (por ejemplo, de especialidad) */
  .special-add {
    background: var(--color-primario);
  }

Explicación del código: " specialty_menu.css - Estilos de Menú de Especialidades, Grid y Detalles del Plato "

/ specialty-menu /
Comentario que indica el inicio de los estilos para la sección de menú de especialidades.

.specialty-menu {
padding: 4rem 2rem;
background: #fff9f5;
}
Esta regla establece el estilo general de la sección:

Se aplica un padding amplio (4rem en vertical y 2rem en horizontal) para dar espacio interno.

Se define un fondo con un tono muy claro (#fff9f5) que aporta una atmósfera suave.

.specialty-menu .section-header {
text-align: center;
margin-bottom: 3rem;
}
El encabezado de la sección se centra horizontalmente y se le asigna:

Un margen inferior de 3rem para separar el título del contenido posterior.

.specialty-menu .section-header h2 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
color: var(--color-primario);
}
El título principal (h2) dentro del encabezado:

Se muestra con un tamaño de fuente grande (2.5rem) y un pequeño margen inferior para separación.

Usa la variable CSS para el color primario, destacándose visualmente.

.specialty-menu .section-subtitle {
color: var(--color-secundario);
font-size: 1.2rem;
margin-top: 0.5rem;
}
El subtítulo de la sección:

Se establece con el color secundario, un tamaño moderado (1.2rem) y un margen superior para separarlo del título.

.menu-grid {
display: grid;
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
Se define una cuadrícula para organizar los ítems del menú:

Se usa CSS Grid para distribuir los elementos con un espacio (gap) de 2rem.

Se limita el ancho máximo a 1200px y se centra horizontalmente.

La plantilla de columnas permite que se adapten automáticamente, asegurando un ancho mínimo de 300px para cada columna.

.menu-item {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
transition: transform 0.3s ease;
}
Cada ítem del menú se estiliza como una tarjeta:

Se asigna un fondo blanco, bordes redondeados (15px) y se ocultan los excesos con overflow hidden.

Se añade una sombra suave para dar profundidad.

Se dispone el contenido en columna usando flexbox, y se define una transición para animaciones suaves en transformaciones.

.menu-item:hover {
transform: translateY(-5px);
}
Al pasar el cursor sobre un ítem, se aplica una animación que:

Mueve la tarjeta 5px hacia arriba, dando un efecto de elevación y resaltando la interactividad.

.item-header {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
El contenedor de la imagen del ítem:

Se posiciona de forma relativa para permitir elementos posicionados en su interior.

Se fija un tamaño de 200px de altura y se oculta el contenido que exceda el área.

.item-header img {
width: 100%;
height: 100%;
object-fit: cover;
}
La imagen en el encabezado:

Se ajusta para ocupar todo el ancho y la altura del contenedor, utilizando "object-fit: cover" para mantener la proporción sin distorsión.

/* Elementos específicos para las especialidades */

.specialty-badge {
background: var(--color-primario);
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.9rem;
position: absolute;
top: 10px;
left: 10px;
}
La insignia de especialidad se posiciona en la esquina superior izquierda del ítem:

Se utiliza el color primario para el fondo y blanco para el texto, con un padding pequeño y bordes redondeados.

Se define un tamaño de fuente discreto y se posiciona absolutamente dentro del contenedor.

.chef-note {
position: absolute;
bottom: 10px;
left: 10px;
background: var(--color-secundario);
color: white;
padding: 3px 8px;
border-radius: 5px;
font-size: 0.8rem;
}
La nota del chef se coloca en la parte inferior izquierda del ítem:

Se asigna un fondo con el color secundario y texto blanco, con un padding reducido y bordes ligeramente redondeados.

Su tamaño de fuente es pequeño para diferenciarse del título.

.item-body {
padding: 2rem;
display: flex;
flex-direction: column;
flex: 1;
}
El cuerpo del ítem (donde se muestra el contenido textual):

Se le aplica un padding generoso para separar el contenido.

Se utiliza flexbox para organizar el contenido en columna y se permite que ocupe el espacio disponible.

.item-body h3 {
color: var(--color-texto);
font-size: 1.6rem;
margin-bottom: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
El título dentro del cuerpo del ítem:

Se muestra con el color de texto definido por la variable, un tamaño de fuente considerable y un margen inferior.

Se usa flexbox para distribuir elementos adicionales (como íconos o botones) de forma equilibrada.

.ingredients-list {
margin: 1.5rem 0;
padding: 1rem;
background: #f8f8f8;
border-radius: 10px;
}
La lista de ingredientes se destaca en una caja:

Se define un margen vertical y un padding interno, con un fondo gris muy claro y bordes redondeados para separar visualmente la información.

.ingredients-list span {
display: block;
color: var(--color-primario);
font-weight: bold;
margin-bottom: 0.5rem;
}
Cada título o etiqueta dentro de la lista de ingredientes:

Se muestra en bloque, con el color primario, en negrita y con un pequeño margen inferior.

.ingredients-list ul {
list-style: none;
padding-left: 1rem;
}
La lista sin viñetas predeterminadas:

Se elimina el estilo de lista y se añade un padding a la izquierda para dar espacio a los indicadores personalizados.

.ingredients-list li {
position: relative;
margin-bottom: 0.3rem;
padding-left: 1.5rem;
}
Cada elemento de la lista de ingredientes:

Se posiciona de forma relativa para permitir la inserción de un marcador personalizado, con margen y padding para espaciar el contenido.

.ingredients-list li::before {
content: "•";
color: var(--color-secundario);
position: absolute;
left: 0;
}
Se crea un marcador en forma de viñeta:

Se usa el pseudo-elemento ::before para insertar un punto (•) en color secundario, posicionado a la izquierda.

.size-selector {
display: flex;
gap: 1rem;
margin: 1.5rem 0;
}
El selector de tamaño se organiza en línea:

Se usa flexbox para disponer las opciones, con un espacio (gap) de 1rem entre ellas y márgenes verticales.

.btn-size {
padding: 0.5rem 1.5rem;
border: 2px solid #eee;
border-radius: 25px;
background: none;
cursor: pointer;
transition: all 0.3s ease;
}
El botón para seleccionar el tamaño del producto:

Tiene un padding cómodo, borde definido en gris claro y esquinas redondeadas.

Se establece sin fondo, con cursor pointer e incluye una transición suave para cambios de estado.

.btn-size.active {
border-color: var(--color-primario);
background: var(--color-primario);
color: white;
}
Cuando se activa una opción de tamaño:

Se cambia el borde y el fondo al color primario, y el texto se vuelve blanco para destacar la selección.

.btn-add {
background: var(--color-secundario);
color: white;
padding: 0.8rem 1.5rem;
border: none;
border-radius: 25px;
cursor: pointer;
width: 100%;
transition: all 0.3s ease;
margin-top: auto;
}
El botón para agregar el producto al carrito:

Se establece con el color secundario, texto blanco, y un padding adecuado.

Se eliminan los bordes y se redondean las esquinas, ocupando todo el ancho disponible.

La transición suaviza cualquier cambio de estado y se posiciona al final del contenedor (margin-top: auto).

.btn-add i {
margin-right: 0.5rem;
}
Dentro del botón, cualquier icono (i) tiene:

Un margen a la derecha para separar visualmente el icono del texto.

/* Para botones especiales (por ejemplo, de especialidad) */

.special-add {
background: var(--color-primario);
}
La clase .special-add permite personalizar botones especiales:

Se asigna el color primario al fondo, diferenciándolos de los botones estándar.

carta_bebidas.html

Este bloque de código HTML define la sección de Bebidas Artesanales en la web de la Pizzería Mamma Mia. Se presenta una cuidada selección de bebidas, con imágenes, descripciones, precios y opciones de tamaño, permitiendo a los usuarios acompañar su pizza con la bebida ideal y agregarla al carrito de compra.

drinks_menu.html - Sección de Bebidas Artesanales: Estructura y Componentes del Menú 

<!DOCTYPE html>
<html lang="es">
  <!-- Plantilla Bloque 1: Declaración y Encabezado -->
  <!-- El bloque 1 se coloca en el <head> e incluye la declaración del documento, 
       meta tags, título, enlaces a hojas de estilo y Font Awesome -->
  <head>
    <!-- Código del Bloque 1 va aquí -->
  </head>
  <body>
    <!-- Plantilla Bloque 2: Encabezado y Navegación -->
    <!-- El bloque 2 se coloca al inicio del <body> e incluye el header con la barra de navegación -->
    <!-- Código del Bloque 2 va aquí -->
    <main>
      <!-- SECCIÓN DE BEBIDAS ARTESANALES -->
      <section class="drinks-menu">
        <div class="section-header">
          <h2>Bebidas Artesanales</h2>
          <p class="section-subtitle">Acompaña tu pizza con la mejor selección</p>
        </div>
        <div class="drinks-grid">
          <!-- Bebida 1 -->
          <div class="drink-item">
            <div class="drink-header">
              <!-- Asegúrate de tener la imagen "bebidas.jpg" en la carpeta images -->
              <img src="images/bebidas.jpg" alt="Limonada de Lavanda" class="drink-image" />
              <div class="badge drink-badge">Sin alcohol</div>
              <div class="dietary-icons">
                <i class="fas fa-leaf" title="Vegano"></i>
                <i class="fas fa-seedling" title="Orgánico"></i>
              </div>
            </div>
            <div class="drink-body">
              <h3>
                Limonada de Lavanda
                <span class="price">$5.99</span>
              </h3>
              <p class="drink-description">
                Mezcla refrescante de limón orgánico con esencia natural de lavanda
              </p>
              <div class="size-selector">
                <button class="btn-size active" data-size="500ml">500ml</button>
                <button class="btn-size" data-size="1lt">1L (+$2)</button>
              </div>
              <button class="btn-add drink-add">
                <i class="fas fa-glass-whiskey"></i> Añadir
              </button>
            </div>
          </div>
          <!-- Bebida 2 -->
          <div class="drink-item">
            <div class="drink-header">
              <img src="images/bebidas.jpg" alt="Cerveza Artesanal" class="drink-image" />
              <div class="badge drink-badge alcoholic">Con alcohol</div>
            </div>
            <div class="drink-body">
              <h3>
                IPA Artesanal
                <span class="price">$7.99</span>
              </h3>
              <p class="drink-description">
                Cerveza lupulada con notas cítricas y amargor balanceado
              </p>
              <div class="size-selector">
                <button class="btn-size active" data-size="330ml">330ml</button>
                <button class="btn-size" data-size="500ml">500ml (+$1.5)</button>
              </div>
              <button class="btn-add drink-add">
                <i class="fas fa-glass-whiskey"></i> Añadir
              </button>
            </div>
          </div>
          <!-- Repite la estructura para otras bebidas si se requiere -->
        </div>
      </section>
  
    </main>
    <!-- Plantilla Bloque 4: Modal del Carrito y Funcionalidad JavaScript -->
    <!-- Se cololca al temrinarl el main-->
</html>

Explicación del código: " drinks_menu.html - Sección de Bebidas Artesanales: Estructura y Componentes del Menú "

<!DOCTYPE html>
Declara que el documento es HTML5.

<html lang="es"> Inicia el documento HTML y establece que el idioma es español. <!-- Plantilla Bloque 1: Declaración y Encabezado -->
Indica el inicio del bloque para la declaración y el encabezado del documento.

<!-- El bloque 1 se coloca en el <head> e incluye la declaración del documento, meta tags, título, enlaces a hojas de estilo y Font Awesome -->
Explica que en la sección <head> se incluirán elementos esenciales como meta datos, título, enlaces a hojas de estilo y Font Awesome.

<head> Abre la sección del encabezado del documento. <!-- Código del Bloque 1 va aquí -->
Lugar reservado para insertar el contenido del encabezado.

</head> Cierra la sección del encabezado. <body> Inicia el cuerpo del documento, donde se muestra el contenido visible. <!-- Plantilla Bloque 2: Encabezado y Navegación -->
Marca el inicio del bloque destinado al encabezado y la navegación del sitio.

<!-- El bloque 2 se coloca al inicio del <body> e incluye el header con la barra de navegación -->
Explica que en este bloque se insertará el header y la barra de navegación.

<!-- Código del Bloque 2 va aquí -->
Espacio reservado para incluir el código correspondiente al encabezado y navegación.

<main> Abre la sección principal del contenido de la página. <!-- SECCIÓN DE BEBIDAS ARTESANALES -->
Introduce la sección dedicada a las bebidas artesanales.

<section class="drinks-menu"> Define una sección con la clase "drinks-menu" para agrupar las bebidas artesanales. <div class="section-header"> Contenedor para el encabezado de la sección. <h2>Bebidas Artesanales</h2> Muestra el título de la sección. <p class="section-subtitle">Acompaña tu pizza con la mejor selección</p> Presenta un subtítulo que invita a combinar la pizza con una buena selección de bebidas. </div> Cierra el contenedor del encabezado de la sección. <div class="drinks-grid"> Contenedor que organiza los elementos de bebidas en una cuadrícula. <!-- Bebida 1 -->
Indica el inicio del bloque para la primera bebida.

<div class="drink-item"> Contenedor para un ítem de bebida. <div class="drink-header"> Contenedor que agrupa la cabecera de la bebida, donde se muestra la imagen y etiquetas. <!-- Asegúrate de tener la imagen "bebidas.jpg" en la carpeta images -->
Comentario que recuerda verificar la existencia de la imagen "bebidas.jpg".

<img src="images/bebidas.jpg" alt="Limonada de Lavanda" class="drink-image" /> Muestra la imagen de la bebida; el atributo alt describe la imagen y se aplica la clase "drink-image". <div class="badge drink-badge">Sin alcohol</div> Etiqueta que indica que la bebida es sin alcohol. <div class="dietary-icons"> Contenedor para los íconos relacionados con características dietéticas.
<i class="fas fa-leaf" title="Vegano"></i>
Ícono que sugiere que la bebida es apta para veganos.

<i class="fas fa-seedling" title="Orgánico"></i>
Ícono que señala que la bebida es orgánica.

</div> Cierra el contenedor de íconos dietéticos. </div> Cierra el contenedor del encabezado de la bebida. <div class="drink-body"> Contenedor que agrupa la información y descripción de la bebida. <h3> Abre el título del producto.
Limonada de Lavanda
Nombre de la bebida.

<span class="price">$5.99</span>
Muestra el precio de la bebida.

</h3> Cierra el título del producto. <p class="drink-description"> Abre el párrafo que describe la bebida.
Mezcla refrescante de limón orgánico con esencia natural de lavanda
Texto que resalta los ingredientes y la frescura de la bebida.

</p> Cierra la descripción de la bebida. <div class="size-selector"> Contenedor para los botones que permiten elegir el tamaño de la bebida.
<button class="btn-size active" data-size="500ml">500ml</button>
Botón para seleccionar la presentación de 500ml, marcado como activo por defecto.

<button class="btn-size" data-size="1lt">1L (+$2)</button>
Botón para seleccionar la presentación de 1 litro, indicando un recargo de $2.

</div> Cierra el contenedor del selector de tamaño. <button class="btn-add drink-add"> Botón para añadir la bebida al carrito, con clases que indican su función.
<i class="fas fa-glass-whiskey"></i> Añadir
Dentro del botón se muestra un ícono y el texto "Añadir" para realizar la acción.

</button> Cierra el botón de añadir la bebida. </div> Cierra el contenedor del cuerpo de la bebida. </div> Cierra el contenedor del primer ítem de bebida. <!-- Bebida 2 -->
Indica el inicio del bloque para la segunda bebida.

<div class="drink-item"> Contenedor para el segundo ítem de bebida. <div class="drink-header"> Contenedor que agrupa la cabecera de la segunda bebida. <img src="images/bebidas.jpg" alt="Cerveza Artesanal" class="drink-image" /> Muestra la imagen de la segunda bebida; el atributo alt indica "Cerveza Artesanal". <div class="badge drink-badge alcoholic">Con alcohol</div> Etiqueta que indica que esta bebida contiene alcohol, utilizando la clase "alcoholic". </div> Cierra el contenedor del encabezado de la segunda bebida. <div class="drink-body"> Contenedor que agrupa la información y detalles de la segunda bebida. <h3> Abre el título del producto.
IPA Artesanal
Nombre de la segunda bebida.

<span class="price">$7.99</span>
Muestra el precio de la bebida dentro del título.

</h3> Cierra el título del producto. <p class="drink-description"> Abre el párrafo que describe la bebida.
Cerveza lupulada con notas cítricas y amargor balanceado
Descripción que resalta las características de sabor de la cerveza.

</p> Cierra la descripción de la bebida. <div class="size-selector"> Contenedor para los botones de selección del tamaño de la segunda bebida.
<button class="btn-size active" data-size="330ml">330ml</button>
Botón para seleccionar el tamaño de 330ml, marcado por defecto.

<button class="btn-size" data-size="500ml">500ml (+$1.5)</button>
Botón para elegir el tamaño de 500ml, con un recargo de $1.5.

</div> Cierra el contenedor del selector de tamaño. <button class="btn-add drink-add"> Botón para añadir la segunda bebida al carrito, con clases que indican su función.
<i class="fas fa-glass-whiskey"></i> Añadir
Incluye un ícono y el texto "Añadir" para ejecutar la acción.

</button> Cierra el botón de añadir la bebida. </div> Cierra el contenedor del cuerpo de la segunda bebida. </div> Cierra el contenedor del segundo ítem de bebida. <!-- Repite la estructura para otras bebidas si se requiere -->
Sugerencia para replicar la misma estructura y añadir más bebidas según se necesite.

</div> Cierra el contenedor de la cuadrícula de bebidas. </section> Cierra la sección "drinks-menu" dedicada a las bebidas artesanales. </main> Cierra la sección principal del contenido. <!-- Plantilla Bloque 4: Modal del Carrito y Funcionalidad JavaScript -->
Indica el bloque destinado al modal del carrito y la funcionalidad JavaScript.

<!-- Se cololca al temrinarl el main-->
Comentario que señala la posición de este bloque al final del contenido principal.

</html> Cierra el documento HTML.

carta_bebidas.css

Este archivo define los estilos para la sección de bebidas de la web de la Pizzería Mamma Mia. Se establece el diseño de un menú con cabecera centralizada y una rejilla adaptable que organiza las tarjetas de cada bebida, las cuales incluyen imágenes, distintivos y opciones interactivas para la selección de tamaños y la acción de añadir al pedido. Estos estilos aseguran una presentación visualmente atractiva y coherente en todo el sitio, facilitando futuras modificaciones e integraciones con otros archivos de estilo.

drinks_menu.css - Estilos de Menú de Bebidas, Tarjetas de Producto y Acciones

.drinks-menu {
    padding: 4rem 2rem;
    background: #fff9f5;
  }
  
  .drinks-menu .section-header {
    text-align: center;
    margin-bottom: 3rem;
  }
  
  .drinks-menu .section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-primario);
  }
  
  .drinks-menu .section-subtitle {
    color: var(--color-secundario);
    font-size: 1.2rem;
    margin-top: 0.5rem;
  }
  
  .drinks-grid {
    display: grid;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
  
  .drink-item {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
  }
  
  .drink-item:hover {
    transform: translateY(-5px);
  }
  
  .drink-header {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
  }
  
  .drink-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Badge para bebidas */
  .badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--color-primario);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
  }
  
  .badge.alcoholic {
    background: var(--color-secundario);
  }
  
  /* Íconos para atributos dietéticos */
  .dietary-icons {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 0.5rem;
  }
  
  .drink-body {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  
  .drink-body h3 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-texto);
  }
  
  .drink-body p {
    margin-bottom: 1rem;
    font-size: 1rem;
    color: #555;
  }
  
  /* Selector de tamaño para bebidas */
  .size-selector {
    display: flex;
    gap: 1rem;
    margin: 1.5rem 0;
  }
  
  .btn-size {
    padding: 0.5rem 1.5rem;
    border: 2px solid #eee;
    border-radius: 25px;
    background: none;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .btn-size.active {
    border-color: var(--color-primario);
    background: var(--color-primario);
    color: white;
  }
  
  .btn-add {
    background: var(--color-secundario);
    color: white;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
    margin-top: auto;
  }
  
  .btn-add i {
    margin-right: 0.5rem;
  }
  
  .drink-add {
    background: var(--color-primario);
  }

Explicación del código: " drinks_menu.css - Estilos de Menú de Bebidas, Tarjetas de Producto y Acciones "

/ drinks-menu /
Comentario que indica el inicio de los estilos para la sección de bebidas.

.drinks-menu {
padding: 4rem 2rem;
background: #fff9f5;
}
Se establece un padding amplio (4rem en vertical y 2rem en horizontal) para dar espacio al contenido de la sección, y se asigna un fondo claro con un tono cálido.

.drinks-menu .section-header {
text-align: center;
margin-bottom: 3rem;
}
La cabecera de la sección se centra y se le añade un margen inferior de 3rem para separar visualmente del resto del contenido.

.drinks-menu .section-header h2 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
color: var(--color-primario);
}
El título (h2) dentro de la cabecera se destaca con un tamaño de fuente grande (2.5rem), un pequeño margen inferior y el color primario definido en las variables CSS.

.drinks-menu .section-subtitle {
color: var(--color-secundario);
font-size: 1.2rem;
margin-top: 0.5rem;
}
El subtítulo de la sección utiliza el color secundario, un tamaño de fuente moderado (1.2rem) y un margen superior para separar del título.

.drinks-grid {
display: grid;
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
Se define un contenedor tipo grid para los elementos de bebida:

Se usa un gap de 2rem entre celdas.

Se limita el ancho máximo a 1200px y se centra con márgenes automáticos.

La cuadrícula se adapta automáticamente con columnas de un mínimo de 300px.

.drink-item {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
transition: transform 0.3s ease;
}
Cada tarjeta de bebida se muestra con fondo blanco, bordes redondeados y una sombra sutil para dar profundidad.

Se utiliza flexbox en dirección columna para organizar sus partes.

La transición permite un efecto suave al aplicar transformaciones.

.drink-item:hover {
transform: translateY(-5px);
}
Al pasar el cursor sobre la tarjeta, se desplaza ligeramente hacia arriba (5px), creando un efecto visual de elevación.

.drink-header {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
La cabecera de la bebida se posiciona de forma relativa para ubicar elementos superpuestos (como el badge o íconos), con un tamaño fijo de 200px de alto y ocultando cualquier contenido desbordado.

.drink-header img {
width: 100%;
height: 100%;
object-fit: cover;
}
La imagen de la bebida ocupa todo el espacio del contenedor, manteniendo la proporción y cubriendo toda el área, sin distorsionarse.

Badge para bebidas
.badge {
position: absolute;
top: 10px;
left: 10px;
background: var(--color-primario);
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.9rem;
}
Se utiliza para mostrar una etiqueta (badge) sobre la imagen:

Se posiciona en la esquina superior izquierda.

Se le asigna el color primario como fondo y texto blanco, con padding y bordes redondeados para dar forma de etiqueta.

.badge.alcoholic {
background: var(--color-secundario);
}
Si la bebida es alcohólica, se le cambia el fondo del badge al color secundario.

Íconos para atributos dietéticos
.dietary-icons {
position: absolute;
bottom: 10px;
left: 10px;
display: flex;
gap: 0.5rem;
}
Los íconos que indican atributos dietéticos se posicionan en la parte inferior izquierda, se organizan en línea (flex) y se separan con un pequeño gap.

.drink-body {
padding: 2rem;
display: flex;
flex-direction: column;
flex: 1;
}
El cuerpo de la tarjeta se dota de un padding generoso y se organiza en columna para distribuir los elementos (título, descripción, etc.).

El "flex: 1" permite que este contenedor se expanda y ocupe el espacio restante.

.drink-body h3 {
font-size: 1.6rem;
margin-bottom: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--color-texto);
}
El título de la bebida se destaca con un tamaño de 1.6rem, un margen inferior y se dispone con flexbox para separar el título de otros posibles elementos (como un precio o ícono) de manera equilibrada.

.drink-body p {
margin-bottom: 1rem;
font-size: 1rem;
color: #555;
}
El párrafo descriptivo utiliza un tamaño de fuente estándar, color gris (#555) y un margen inferior para separar de otros elementos.

Selector de tamaño para bebidas
.size-selector {
display: flex;
gap: 1rem;
margin: 1.5rem 0;
}
El contenedor del selector de tamaño se muestra como una fila (flex) con un espacio de 1rem entre botones y márgenes verticales de 1.5rem.

.btn-size {
padding: 0.5rem 1.5rem;
border: 2px solid #eee;
border-radius: 25px;
background: none;
cursor: pointer;
transition: all 0.3s ease;
}
Cada botón del selector de tamaño:

Tiene un padding cómodo, borde sutil y bordes redondeados para formar un botón con apariencia suave.

Se define una transición para cambios en su estilo y se resalta su interactividad con cursor pointer.

.btn-size.active {
border-color: var(--color-primario);
background: var(--color-primario);
color: white;
}
Cuando un botón del selector está activo, se actualizan sus estilos para destacar:

El borde y fondo adoptan el color primario, y el texto se muestra en blanco.

.btn-add {
background: var(--color-secundario);
color: white;
padding: 0.8rem 1.5rem;
border: none;
border-radius: 25px;
cursor: pointer;
width: 100%;
transition: all 0.3s ease;
margin-top: auto;
}
El botón para añadir la bebida se configura con:

Fondo en color secundario y texto blanco para resaltar.

Un padding adecuado, sin bordes y bordes redondeados, ocupando todo el ancho disponible.

Se añade una transición para efectos al interactuar y se posiciona al final del contenedor con "margin-top: auto".

.btn-add i {
margin-right: 0.5rem;
}
Si el botón contiene un ícono (elemento <i>), se le añade un pequeño margen a la derecha para separar visualmente el ícono del texto.

.drink-add {
background: var(--color-primario);
}
Esta clase adicional permite cambiar el fondo del botón a color primario, según la necesidad o variación de estilo.

postres.html

Esta sección presenta los postres artesanales de la Pizzería Mamma Mia, ofreciendo opciones dulces que complementan la experiencia gastronómica. Se destacan productos como el Tiramisú Italiano y el Cheesecake Premium, cada uno acompañado de su imagen, descripción, precio y detalles que resaltan su carácter especial y novedoso.

postres.html - Estructura del Documento y Sección de Postres Artesanales 

<!DOCTYPE html>
<html lang="es">
  <!-- Plantilla Bloque 1: Declaración y Encabezado -->
  <!-- El bloque 1 se coloca en el <head> e incluye la declaración del documento, 
       meta tags, título, enlaces a hojas de estilo y Font Awesome -->
  <head>
    <!-- Código del Bloque 1 va aquí -->
  </head>
  <body>
    <!-- Plantilla Bloque 2: Encabezado y Navegación -->
    <!-- El bloque 2 se coloca al inicio del <body> e incluye el header con la barra de navegación -->
    <!-- Código del Bloque 2 va aquí -->
    <main>
        <!-- SECCIÓN DE POSTRES ARTESANALES -->
        <section class="desserts-menu">
          <div class="section-header">
            <h2>Postres Artesanales</h2>
            <p class="section-subtitle">El dulce final perfecto para tu comida</p>
          </div>
          <div class="desserts-grid">
            <!-- Postre 1 -->
            <div class="dessert-item">
              <div class="dessert-header">
                <!-- Asegúrate de tener la imagen "postres.jpg" en la carpeta images -->
                <img src="images/postres.jpg" alt="Tiramisú Clásico" class="dessert-image" />
                <div class="badge dessert-badge">Especialidad</div>
                <div class="dietary-tag vegano">Vegano</div>
              </div>
              <div class="dessert-body">
                <h3>
                  Tiramisú Italiano
                  <span class="price">$8.99</span>
                </h3>
                <p class="dessert-description">
                  Capas de bizcocho de café con mascarpone y cacao en polvo
                </p>
                <div class="sweetness-meter">
                  <span>Dulzura:</span>
                  <div class="meter-bar">
                    <div class="meter-fill" style="width: 70%"></div>
                  </div>
                </div>
                <button class="btn-add dessert-add">
                  <i class="fas fa-ice-cream"></i> Añadir Postre
                </button>
              </div>
            </div>
            <!-- Postre 2 -->
            <div class="dessert-item">
              <div class="dessert-header">
                <img src="images/postres.jpg" alt="Cheesecake de Frutos Rojos" class="dessert-image" />
                <div class="badge dessert-badge">Nuevo</div>
              </div>
              <div class="dessert-body">
                <h3>
                  Cheesecake Premium
                  <span class="price">$9.99</span>
                </h3>
                <p class="dessert-description">
                  Base crujiente de galleta con topping de frutos rojos frescos
                </p>
                <div class="sweetness-meter">
                  <span>Dulzura:</span>
                  <div class="meter-bar">
                    <div class="meter-fill" style="width: 85%"></div>
                  </div>
                </div>
                <button class="btn-add dessert-add">
                  <i class="fas fa-ice-cream"></i> Añadir Postre
                </button>
              </div>
            </div>
            <!-- Agrega más postres siguiendo esta estructura -->
          </div>
        </section>
    </main>
    <!-- Plantilla Bloque 4: Modal del Carrito y Funcionalidad JavaScript -->
    <!-- Se cololca al temrinarl el main-->
</html>

Explicación del código: " postres.html - Estructura del Documento y Sección de Postres Artesanales "

<!DOCTYPE html>
Declara que el documento es HTML5.

<html lang="es"> Inicia el documento HTML y establece el idioma en español. <!-- Plantilla Bloque 1: Declaración y Encabezado -->
Comentario que señala el inicio del bloque para la declaración y el encabezado.

<!-- El bloque 1 se coloca en el <head> e incluye la declaración del documento, meta tags, título, enlaces a hojas de estilo y Font Awesome -->
Explica que en la sección <head> se incluirán elementos esenciales como meta tags, título, enlaces a hojas de estilo y Font Awesome.

<head> Abre la sección del encabezado. <!-- Código del Bloque 1 va aquí -->
Indica dónde se insertará el contenido del encabezado (meta datos, título, estilos, etc.).

</head> Cierra la sección del encabezado. <body> Inicia el cuerpo del documento, que contendrá el contenido visible. <!-- Plantilla Bloque 2: Encabezado y Navegación -->
Comentario que marca el comienzo del bloque destinado al encabezado y la navegación.

<!-- El bloque 2 se coloca al inicio del <body> e incluye el header con la barra de navegación -->
Explica que en este bloque se ubicará el header y la barra de navegación.

<!-- Código del Bloque 2 va aquí -->
Espacio reservado para insertar el código del header y la navegación.

<main> Abre la sección principal del contenido. <!-- SECCIÓN DE POSTRES ARTESANALES -->
Comentario que introduce la sección dedicada a los postres artesanales.

<section class="desserts-menu"> Define una sección con la clase "desserts-menu" para agrupar los elementos de postres. <div class="section-header"> Contenedor para el encabezado de la sección. <h2>Postres Artesanales</h2> Muestra el título de la sección, que indica "Postres Artesanales". <p class="section-subtitle">El dulce final perfecto para tu comida</p> Proporciona un subtítulo que describe la sección como el cierre dulce ideal para la comida. </div> Cierra el contenedor del encabezado de la sección. <div class="desserts-grid"> Contenedor que organiza los postres en una cuadrícula. <!-- Postre 1 -->
Comentario que indica el inicio del bloque para el primer postre.

<div class="dessert-item"> Contenedor que agrupa los elementos correspondientes al primer postre. <div class="dessert-header"> Abre el contenedor del encabezado del postre, destinado a la imagen y etiquetas. <!-- Asegúrate de tener la imagen "postres.jpg" en la carpeta images -->
Comentario recordatorio sobre la ubicación de la imagen.

<img src="images/postres.jpg" alt="Tiramisú Clásico" class="dessert-image" /> Muestra la imagen del postre; el atributo alt describe la imagen y se aplica una clase para estilos. <div class="badge dessert-badge">Especialidad</div> Etiqueta que indica que este postre es una especialidad. <div class="dietary-tag vegano">Vegano</div> Etiqueta que informa que el postre es apto para veganos. </div> Cierra el contenedor del encabezado del postre. <div class="dessert-body"> Abre el contenedor que contiene los detalles del postre. <h3> Inicia el título del postre.
Tiramisú Italiano
Nombre del postre.

<span class="price">$8.99</span>
Muestra el precio del postre dentro del título.

</h3> Cierra el título del postre. <p class="dessert-description"> Abre un párrafo que describe el postre.
Capas de bizcocho de café con mascarpone y cacao en polvo
Descripción del postre.

</p> Cierra el párrafo descriptivo. <div class="sweetness-meter"> Contenedor para el indicador de dulzura del postre.
<span>Dulzura:</span>
Etiqueta que introduce el medidor de dulzura.

<div class="meter-bar"> Contenedor que representa la barra del medidor. <div class="meter-fill" style="width: 70%"></div> Barra que indica el nivel de dulzura con un ancho del 70%. </div> Cierra el contenedor de la barra del medidor. </div> Cierra el contenedor del medidor de dulzura. <button class="btn-add dessert-add"> Botón para añadir el postre al carrito, con clases para estilizar y diferenciar su función.
<i class="fas fa-ice-cream"></i> Añadir Postre
Incluye un ícono (Font Awesome) que representa un helado y el texto que invita a añadir el postre.

</button> Cierra el botón. </div> Cierra el contenedor del cuerpo del postre. </div> Cierra el contenedor del primer postre. <!-- Postre 2 -->
Comentario que indica el inicio del bloque para el segundo postre.

<div class="dessert-item"> Contenedor que agrupa los elementos correspondientes al segundo postre. <div class="dessert-header"> Abre el contenedor del encabezado del postre. <img src="images/postres.jpg" alt="Cheesecake de Frutos Rojos" class="dessert-image" /> Muestra la imagen del segundo postre, con el atributo alt que lo describe. <div class="badge dessert-badge">Nuevo</div> Etiqueta que indica que este postre es "Nuevo". </div> Cierra el contenedor del encabezado. <div class="dessert-body"> Abre el contenedor con los detalles del segundo postre. <h3> Inicia el título del postre.
Cheesecake Premium
Nombre del postre.

<span class="price">$9.99</span>
Muestra el precio del postre dentro del título.

</h3> Cierra el título del postre. <p class="dessert-description"> Abre un párrafo para la descripción.
Base crujiente de galleta con topping de frutos rojos frescos
Descripción del segundo postre.

</p> Cierra el párrafo descriptivo. <div class="sweetness-meter"> Contenedor para el medidor de dulzura.
<span>Dulzura:</span>
Etiqueta que introduce el medidor.

<div class="meter-bar"> Contenedor que muestra la barra del medidor. <div class="meter-fill" style="width: 85%"></div> Barra que representa el nivel de dulzura, configurada al 85%. </div> Cierra el contenedor de la barra. </div> Cierra el contenedor del medidor de dulzura. <button class="btn-add dessert-add"> Botón para añadir este postre al carrito, con clases que identifican su función.
<i class="fas fa-ice-cream"></i> Añadir Postre
Incluye un ícono representativo y el texto "Añadir Postre".

</button> Cierra el botón. </div> Cierra el contenedor del cuerpo del postre. </div> Cierra el contenedor del segundo postre. <!-- Agrega más postres siguiendo esta estructura -->
Comentario que sugiere que se pueden añadir más postres con la misma estructura.

</div> Cierra el contenedor de la cuadrícula de postres. </section> Cierra la sección "desserts-menu". </main> Cierra la sección principal del contenido. <!-- Plantilla Bloque 4: Modal del Carrito y Funcionalidad JavaScript -->
Comentario que indica el bloque destinado al modal del carrito y la funcionalidad JavaScript.

<!-- Se cololca al temrinarl el main-->
Comentario que señala que este bloque se coloca al finalizar el contenido principal.

</html> Cierra el documento HTML.

postres.css

Este archivo define la apariencia de la sección de postres de la Pizzería Mamma Mia. Se establecen estilos para el contenedor principal, la cabecera de la sección y la disposición en rejilla de los elementos, así como formatos para imágenes, etiquetas y botones interactivos. Esto garantiza una presentación atractiva y coherente de la carta de postres.

postres.css - Estilos del Menú de Postres, Tarjetas y Botón de Agregar 

.desserts-menu {
    padding: 4rem 2rem;
    background: #fff9f5;
  }
  
  .desserts-menu .section-header {
    text-align: center;
    margin-bottom: 3rem;
  }
  
  .desserts-menu .section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-primario);
  }
  
  .desserts-menu .section-subtitle {
    color: var(--color-secundario);
    font-size: 1.2rem;
    margin-top: 0.5rem;
  }
  
  .desserts-grid {
    display: grid;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
  
  .dessert-item {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
  }
  
  .dessert-item:hover {
    transform: translateY(-5px);
  }
  
  .dessert-header {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
  }
  
  .dessert-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--color-primario);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
  }
  
  .dietary-tag {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: var(--color-secundario);
    color: white;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 0.8rem;
  }
  
  .dietary-tag.vegano {
    background: #6ab04c;
  }
  
  .dessert-body {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  
  .dessert-body h3 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-texto);
  }
  
  .dessert-body p {
    margin-bottom: 1rem;
    font-size: 1rem;
    color: #555;
  }
  
  .sweetness-meter {
    margin-bottom: 1.5rem;
  }
  
  .sweetness-meter span {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    display: block;
    color: var(--color-primario);
  }
  
  .meter-bar {
    background: #eee;
    border-radius: 10px;
    overflow: hidden;
    height: 10px;
  }
  
  .meter-fill {
    background: var(--color-secundario);
    height: 100%;
    width: 0;
    transition: width 0.3s ease;
  }
  
  .btn-add {
    background: var(--color-secundario);
    color: white;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
    margin-top: auto;
  }
  
  .btn-add i {
    margin-right: 0.5rem;
  }
  
  .dessert-add {
    background: var(--color-primario);
  }

Explicación del código: " postres.css - Estilos del Menú de Postres, Tarjetas y Botón de Agregar "

/ desserts-menu /
Comentario que indica el inicio de los estilos para la sección de menú de postres.

.desserts-menu {
padding: 4rem 2rem;
background: #fff9f5;
}
Define el contenedor principal del menú de postres:

Se asigna un padding de 4rem en vertical y 2rem en horizontal para espaciar el contenido.

Se establece un fondo de color claro (#fff9f5).

.desserts-menu .section-header {
text-align: center;
margin-bottom: 3rem;
}
Estilos para el encabezado de la sección:

El texto se centra horizontalmente.

Se añade un margen inferior de 3rem para separar del contenido siguiente.

.desserts-menu .section-header h2 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
color: var(--color-primario);
}
Configura el título principal dentro del encabezado:

Se define un tamaño de fuente grande (2.5rem).

Se añade un pequeño margen inferior y se usa el color primario definido en las variables.

.desserts-menu .section-subtitle {
color: var(--color-secundario);
font-size: 1.2rem;
margin-top: 0.5rem;
}
Estilos para el subtítulo de la sección:

Se utiliza el color secundario, un tamaño de fuente moderado y un margen superior para espaciarlo respecto al título.

.desserts-grid {
display: grid;
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
Organiza los postres en una cuadrícula:

Se emplea CSS Grid con un espacio (gap) de 2rem entre elementos.

El ancho máximo se limita a 1200px y se centra con margen automático.

Se crean columnas responsivas con un ancho mínimo de 300px, expandiéndose equitativamente.

.dessert-item {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
transition: transform 0.3s ease;
}
Cada tarjeta de postre se presenta como:

Un contenedor con fondo blanco, bordes redondeados y sombra sutil para dar profundidad.

Se oculta el contenido que desborda y se organiza en columna usando flexbox.

Se añade una transición suave para transformaciones.

.dessert-item:hover {
transform: translateY(-5px);
}
Al pasar el cursor sobre una tarjeta, ésta se eleva ligeramente (5px) para dar una sensación interactiva.

.dessert-header {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
El encabezado de cada postre, destinado a la imagen, se define con:

Posicionamiento relativo y un tamaño fijo (200px de altura) para contener la imagen.

Se oculta cualquier contenido que sobresalga.

.dessert-header img {
width: 100%;
height: 100%;
object-fit: cover;
}
La imagen del postre se ajusta para:

Cubrir todo el ancho y alto del contenedor, manteniendo la proporción con "object-fit: cover".

.badge {
position: absolute;
top: 10px;
left: 10px;
background: var(--color-primario);
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.9rem;
}
El distintivo (badge) en la imagen:

Se posiciona en la esquina superior izquierda con un fondo del color primario y texto en blanco.

Se le aplica un padding y bordes redondeados para darle forma de etiqueta.

.dietary-tag {
position: absolute;
bottom: 10px;
right: 10px;
background: var(--color-secundario);
color: white;
padding: 3px 8px;
border-radius: 5px;
font-size: 0.8rem;
}
La etiqueta dietética (por ejemplo, para indicar ingredientes o condiciones) se posiciona en la esquina inferior derecha:

Con fondo del color secundario, texto blanco, padding pequeño y bordes redondeados.

.dietary-tag.vegano {
background: #6ab04c;
}
Modifica la etiqueta dietética para elementos veganos:

Se cambia el fondo a un tono verde (#6ab04c).

.dessert-body {
padding: 2rem;
display: flex;
flex-direction: column;
flex: 1;
}
El cuerpo de la tarjeta de postre, que contiene detalles:

Se le asigna un padding interno de 2rem y se organiza en columna con flexbox.

El atributo "flex: 1" permite que ocupe el espacio disponible.

.dessert-body h3 {
font-size: 1.6rem;
margin-bottom: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--color-texto);
}
El título del postre en el cuerpo:

Se define un tamaño de fuente de 1.6rem, con margen inferior y color según la variable de texto.

Se utiliza flexbox para distribuir y alinear el contenido (por ejemplo, para incluir precio o iconos).

.dessert-body p {
margin-bottom: 1rem;
font-size: 1rem;
color: #555;
}
El párrafo descriptivo del postre:

Se establece un margen inferior, un tamaño de fuente legible y un color gris oscuro (#555) para el texto.

.sweetness-meter {
margin-bottom: 1.5rem;
}
Este contenedor, que indica el nivel de dulzura, se separa del contenido inferior con un margen de 1.5rem.

.sweetness-meter span {
font-size: 0.9rem;
margin-bottom: 0.5rem;
display: block;
color: var(--color-primario);
}
El texto del medidor de dulzura:

Se configura con un tamaño de fuente de 0.9rem, margen inferior y se muestra como bloque, utilizando el color primario.

.meter-bar {
background: #eee;
border-radius: 10px;
overflow: hidden;
height: 10px;
}
La barra de fondo del medidor:

Se define con un fondo gris claro (#eee), bordes redondeados y una altura fija de 10px.

Se oculta cualquier contenido que desborde para mantener la forma.

.meter-fill {
background: var(--color-secundario);
height: 100%;
width: 0;
transition: width 0.3s ease;
}
La parte rellena del medidor de dulzura:

Usa el color secundario, ocupa toda la altura del contenedor y su anchura se controla dinámicamente.

Se añade una transición suave para animar el cambio de ancho.

.btn-add {
background: var(--color-secundario);
color: white;
padding: 0.8rem 1.5rem;
border: none;
border-radius: 25px;
cursor: pointer;
width: 100%;
transition: all 0.3s ease;
margin-top: auto;
}
El botón para añadir el postre (por ejemplo, al carrito):

Se define con fondo del color secundario, texto en blanco y padding adecuado.

No tiene borde, presenta bordes redondeados y se expande al 100% del contenedor.

La propiedad "margin-top: auto" empuja el botón hacia la parte inferior, y se agrega una transición para suavizar la interacción.

.btn-add i {
margin-right: 0.5rem;
}
Si el botón incluye un ícono, se separa del texto mediante un margen a la derecha de 0.5rem.

.dessert-add {
background: var(--color-primario);
}
Esta clase adicional cambia el fondo del botón a color primario, permitiendo diferenciar visualmente acciones o estados.

personalizar_pizza.html

Esta sección permite a los usuarios crear una pizza personalizada combinando hasta 5 ingredientes. Se presenta una vista interactiva de la pizza junto con un panel de control que muestra la selección de ingredientes y el precio total, facilitando una experiencia dinámica y divertida.

personalizar_pizza.html - Sección para Crear Tu Pizza, Seleccionar Ingredientes y Panel de Control

<!DOCTYPE html>
<html lang="es">
  <!-- Plantilla Bloque 1: Declaración y Encabezado -->
  <!-- El bloque 1 se coloca en el <head> e incluye la declaración del documento, 
       meta tags, título, enlaces a hojas de estilo y Font Awesome -->
  <head>
    <!-- Código del Bloque 1 va aquí -->
  </head>
  <body>
    <!-- Plantilla Bloque 2: Encabezado y Navegación -->
    <!-- El bloque 2 se coloca al inicio del <body> e incluye el header con la barra de navegación -->
    <!-- Código del Bloque 2 va aquí -->
    <main>
        <!-- SECCIÓN: PIZZA CUSTOMIZER -->
        <section class="pizza-customizer">
          <div class="section-header">
            <h2>Crea Tu Pizza</h2>
            <p class="section-subtitle">¡Combina hasta 5 ingredientes!</p>
          </div>
          <div class="customizer-container">
            <!-- Área de la Pizza -->
            <div class="pizza-area">
              <div class="pizza-base">
                <div class="toppings-container"></div>
              </div>
              <!-- Selector de Ingredientes -->
              <div class="ingredients-selector">
                <div class="ingredient" data-ingredient="pepperoni" data-price="2.50">
                  <div class="ingredient-icon">P</div>
                  <span>Pepperoni</span>
                </div>
                <div class="ingredient" data-ingredient="mushrooms" data-price="1.50">
                  <div class="ingredient-icon">M</div>
                  <span>Champiñones</span>
                </div>
                <div class="ingredient" data-ingredient="olives" data-price="1.00">
                  <div class="ingredient-icon">O</div>
                  <span>Aceitunas</span>
                </div>
                <div class="ingredient" data-ingredient="extra-cheese" data-price="2.00">
                  <div class="ingredient-icon">C</div>
                  <span>Queso Extra</span>
                </div>
              </div>
            </div>
            
            <!-- Panel de Control -->
            <div class="control-panel">
              <div class="selected-ingredients">
                <h3>Tu Selección:</h3>
                <ul class="ingredients-list"></ul>
              </div>
              <div class="price-counter">
                <span>Total: </span>
                <span class="total-price">$0.00</span>
              </div>
              <button class="btn-add-to-cart">
                <i class="fas fa-shopping-basket"></i> Añadir al Carrito
                <span class="pizza-spin">🍕</span>
              </button>
            </div>
          </div>
        </section>
    </main>
    <!-- Plantilla Bloque 4: Modal del Carrito y Funcionalidad JavaScript -->
    <!-- Se cololca al temrinarl el main-->
    <script src="js/cart.js"></script>
</html>

Explicación del código: " personalizar_pizza.html - Sección para Crear Tu Pizza, Seleccionar Ingredientes y Panel de Control "

<!DOCTYPE html>
Esta línea declara el documento como HTML5.

<html lang="es"> Se inicia el documento HTML y se especifica que el idioma es español. <!-- Plantilla Bloque 1: Declaración y Encabezado -->
Este comentario indica que el bloque siguiente corresponde a la declaración y al encabezado.

<!-- El bloque 1 se coloca en el <head> e incluye la declaración del documento, meta tags, título, enlaces a hojas de estilo y Font Awesome -->
El comentario explica que en la sección <head> se incluirán los meta datos, el título, los enlaces a hojas de estilo y Font Awesome.

<head> Se abre la sección del encabezado del documento. <!-- Código del Bloque 1 va aquí -->
Aquí se insertará el contenido correspondiente a los meta tags, el título y otros enlaces.

</head> Se cierra la sección del encabezado. <body> Se inicia el cuerpo del documento, donde se colocará el contenido visible. <!-- Plantilla Bloque 2: Encabezado y Navegación -->
Comentario que señala el comienzo del bloque destinado al encabezado y la navegación.

<!-- El bloque 2 se coloca al inicio del <body> e incluye el header con la barra de navegación -->
Este comentario indica que en este bloque se ubicará el header con la barra de navegación.

<!-- Código del Bloque 2 va aquí -->
Lugar reservado para insertar el código del encabezado y la navegación.

<main> Se abre el contenido principal de la página. <!-- SECCIÓN: PIZZA CUSTOMIZER -->
Comentario que introduce la sección para personalizar la pizza.

<section class="pizza-customizer"> Se define una sección con la clase "pizza-customizer" para agrupar el contenido de personalización. <div class="section-header"> Contenedor para el encabezado de la sección. <h2>Crea Tu Pizza</h2> Título que invita a crear tu propia pizza. <p class="section-subtitle">¡Combina hasta 5 ingredientes!</p> Subtítulo que explica brevemente la funcionalidad, permitiendo combinar hasta cinco ingredientes. </div> Cierre del contenedor del encabezado de la sección. <div class="customizer-container"> Contenedor principal que agrupa tanto el área visual de la pizza como el panel de control. <!-- Área de la Pizza -->
Comentario que indica el inicio del área donde se muestra la pizza.

<div class="pizza-area"> Contenedor que agrupa los elementos visuales de la pizza. <div class="pizza-base"> Contenedor que representa la base de la pizza. <div class="toppings-container"></div> Área donde se agregarán visualmente los ingredientes seleccionados (toppings). </div> Cierre del contenedor de la base de la pizza. <!-- Selector de Ingredientes -->
Comentario que introduce la sección para seleccionar los ingredientes.

<div class="ingredients-selector"> Contenedor que agrupa los diferentes ingredientes disponibles para la personalización. <div class="ingredient" data-ingredient="pepperoni" data-price="2.50"> Elemento que representa el ingrediente "Pepperoni", incluyendo atributos de datos para el nombre y precio. <div class="ingredient-icon">P</div> Icono representativo del ingrediente, en este caso una "P" para Pepperoni.
<span>Pepperoni</span>
Etiqueta de texto que muestra el nombre del ingrediente.

</div> Cierre del contenedor del primer ingrediente. <div class="ingredient" data-ingredient="mushrooms" data-price="1.50"> Elemento para el ingrediente "Champiñones", con sus respectivos atributos de datos. <div class="ingredient-icon">M</div> Icono representativo, en este caso la letra "M".
<span>Champiñones</span>
Texto que muestra el nombre del ingrediente.

</div> Cierre del contenedor del segundo ingrediente. <div class="ingredient" data-ingredient="olives" data-price="1.00"> Elemento que representa el ingrediente "Aceitunas", con atributos de datos para identificarlo y asignar un precio. <div class="ingredient-icon">O</div> Icono representativo con la letra "O".
<span>Aceitunas</span>
Texto que muestra el nombre del ingrediente.

</div> Cierre del contenedor del tercer ingrediente. <div class="ingredient" data-ingredient="extra-cheese" data-price="2.00"> Elemento para el ingrediente "Queso Extra", con atributos de datos para el nombre y el precio. <div class="ingredient-icon">C</div> Icono representativo que utiliza la letra "C".
<span>Queso Extra</span>
Texto que muestra el nombre del ingrediente.

</div> Cierre del contenedor del cuarto ingrediente. </div> Cierre del contenedor del selector de ingredientes. </div> Cierre del contenedor del área de la pizza. <!-- Panel de Control -->
Comentario que introduce el panel de control para la personalización.

<div class="control-panel"> Contenedor que agrupa los controles para visualizar la selección, el precio total y el botón para añadir al carrito. <div class="selected-ingredients"> Contenedor que mostrará la lista de ingredientes seleccionados. <h3>Tu Selección:</h3> Título que indica dónde se listarán los ingredientes elegidos. <ul class="ingredients-list"></ul> Lista vacía que se llenará dinámicamente con los ingredientes seleccionados. </div> Cierre del contenedor de ingredientes seleccionados. <div class="price-counter"> Contenedor que muestra el precio total de la pizza personalizada.
<span>Total: </span>
Texto introductorio para el precio total.

<span class="total-price">$0.00</span>
Elemento que muestra el precio total, iniciado en $0.00.

</div> Cierre del contenedor del contador de precio. <button class="btn-add-to-cart"> Botón que permite añadir la pizza personalizada al carrito.
<i class="fas fa-shopping-basket"></i> Añadir al Carrito
Dentro del botón se incluye un ícono (usando Font Awesome) y el texto "Añadir al Carrito".

<span class="pizza-spin">🍕</span>
Se añade un ícono extra, en este caso una pizza, para enfatizar la acción.

</button> Cierre del botón para añadir al carrito. </div> Cierre del contenedor del panel de control. </div> Cierre del contenedor principal del customizer. </section> Cierre de la sección "pizza-customizer". </main> Cierre del contenido principal. <!-- Plantilla Bloque 4: Modal del Carrito y Funcionalidad JavaScript -->
Comentario que indica el bloque destinado al modal del carrito y a la funcionalidad en JavaScript.

<!-- Se cololca al temrinarl el main-->
Comentario que señala que este bloque se coloca al final del contenido principal.

<script src="js/cart.js"></script>
Se incluye el archivo JavaScript que maneja la funcionalidad del carrito.

</html> Cierre del documento HTML.

personalizador.js

Este archivo gestiona la interactividad en la personalización de la pizza en la web de la Pizzería Mamma Mia. Al hacer clic en un ingrediente se activa una animación que muestra una mano emoji moviéndose desde el ingrediente hasta el centro de la pizza, incorporando el topping y actualizando tanto la lista de ingredientes como el precio total.

personalizador.js - Manejo de ingredientes, animación de la mano y topping en la pizza 

document.querySelectorAll('.ingredient').forEach(ingredient => {
    ingredient.addEventListener('click', () => {
      animateHand(ingredient);
    });
  });
  
  function animateHand(ingredient) {
    // Crear elemento "mano" (emoji 👆)
    const hand = document.createElement('div');
    hand.classList.add('hand');
    hand.textContent = '👆';
    document.body.appendChild(hand);
  
    // Posición inicial: centro del ingrediente
    const ingRect = ingredient.getBoundingClientRect();
    const startX = ingRect.left + ingRect.width / 2;
    const startY = ingRect.top + ingRect.height / 2;
    hand.style.left = `${startX}px`;
    hand.style.top = `${startY}px`;
  
    // Destino: centro de la pizza
    const pizzaBase = document.querySelector('.pizza-base');
    const baseRect = pizzaBase.getBoundingClientRect();
    const dropX = baseRect.left + baseRect.width / 2;
    const dropY = baseRect.top + baseRect.height / 2;
  
    // Animar la mano hacia el centro de la pizza
    setTimeout(() => {
      hand.style.left = `${dropX}px`;
      hand.style.top = `${dropY}px`;
    }, 50);
  
    hand.addEventListener('transitionend', () => {
      addTopping(ingredient);
      hand.remove();
    }, { once: true });
  }
  
  function addTopping(ingredient) {
    const topping = document.createElement('div');
    const type = ingredient.dataset.ingredient;
    topping.classList.add('topping', type);
    topping.dataset.ingredient = type;
    
    // Seleccionar el contenedor de toppings
    const container = document.querySelector('.toppings-container');
    const containerRect = container.getBoundingClientRect();
    
    // Calcular posición final aleatoria dentro del área circular
    const centerX = containerRect.width / 2;
    const centerY = containerRect.height / 2;
    const maxRadius = containerRect.width / 2 - 20;
    const angle = Math.random() * 2 * Math.PI;
    const radius = Math.sqrt(Math.random()) * maxRadius;
    const finalX = centerX + radius * Math.cos(angle) - 20;
    const finalY = centerY + radius * Math.sin(angle) - 20;
    
    // Posición inicial en el centro de la pizza
    topping.style.left = `${centerX - 20}px`;
    topping.style.top = `${centerY - 20}px`;
    container.appendChild(topping);
    
    // Animar hacia la posición final
    setTimeout(() => {
      topping.style.left = `${finalX}px`;
      topping.style.top = `${finalY}px`;
    }, 50);
    
    // Agregar ingrediente a la lista de selección y actualizar precio
    const listItem = document.createElement('li');
    listItem.innerHTML = `<span>${ingredient.querySelector('span').textContent}</span><span>$${ingredient.dataset.price}</span>`;
    document.querySelector('.ingredients-list').appendChild(listItem);
    updateTotalPrice();
  }
  
  function updateTotalPrice() {
    let total = 0;
    document.querySelectorAll('.ingredients-list li span:last-child').forEach(priceEl => {
      total += parseFloat(priceEl.textContent.replace('$', ''));
    });
    document.querySelector('.total-price').textContent = `$${total.toFixed(2)}`;
  }

Explicación del código: " personalizador.js - Manejo de ingredientes, animación de la mano y topping en la pizza"

/ Código de interacción de ingredientes y animaciones /
Este bloque de código se encarga de gestionar la interacción con los ingredientes, animar la “mano” (emoji 👆) para simular la selección y agregar el topping correspondiente a la pizza.

document.querySelectorAll('.ingredient').forEach(ingredient => {
ingredient.addEventListener('click', () => {
animateHand(ingredient);
});
});
Se seleccionan todos los elementos con la clase "ingredient". Para cada uno:

Se añade un listener que, al hacer click, llama a la función animateHand pasándole el ingrediente clickeado.

function animateHand(ingredient) {
// Crear elemento "mano" (emoji 👆)
const hand = document.createElement('div');
hand.classList.add('hand');
hand.textContent = '👆';
document.body.appendChild(hand);
Se crea dinámicamente un elemento div que representará la “mano”:

Se le asigna la clase "hand" y se coloca el emoji 👆 como contenido.

Se añade al body del documento para que sea visible.

// Posición inicial: centro del ingrediente
const ingRect = ingredient.getBoundingClientRect();
const startX = ingRect.left + ingRect.width / 2;
const startY = ingRect.top + ingRect.height / 2;
hand.style.left = ${startX}px;
hand.style.top = ${startY}px;
Se calcula la posición central del elemento ingrediente utilizando getBoundingClientRect():

Se establece la posición inicial de la mano (left y top) en el centro del ingrediente.

// Destino: centro de la pizza
const pizzaBase = document.querySelector('.pizza-base');
const baseRect = pizzaBase.getBoundingClientRect();
const dropX = baseRect.left + baseRect.width / 2;
const dropY = baseRect.top + baseRect.height / 2;
Se determina el destino de la animación:

Se selecciona el elemento con la clase "pizza-base" y se calcula su centro.

// Animar la mano hacia el centro de la pizza
setTimeout(() => {
hand.style.left = ${dropX}px;
hand.style.top = ${dropY}px;
}, 50);
Se inicia una animación con un retraso de 50 milisegundos que mueve la mano desde el ingrediente hacia el centro de la pizza.

hand.addEventListener('transitionend', () => {
addTopping(ingredient);
hand.remove();
}, { once: true });
Se añade un listener para el final de la transición:

Al concluir la animación, se llama a la función addTopping pasándole el ingrediente y se elimina la mano del DOM.

El parámetro { once: true } garantiza que el listener se ejecute una única vez. }

function addTopping(ingredient) {
const topping = document.createElement('div');
const type = ingredient.dataset.ingredient;
topping.classList.add('topping', type);
topping.dataset.ingredient = type;
Se crea un nuevo elemento div que representará el topping:

Se obtiene el tipo de ingrediente desde el atributo data-ingredient del elemento clickeado.

Se añaden las clases "topping" y el nombre del tipo, y se almacena el dato en dataset.

// Seleccionar el contenedor de toppings
const container = document.querySelector('.toppings-container');
const containerRect = container.getBoundingClientRect();
Se obtiene el contenedor donde se mostrarán los toppings y se calcula su posición y dimensiones.

// Calcular posición final aleatoria dentro del área circular
const centerX = containerRect.width / 2;
const centerY = containerRect.height / 2;
const maxRadius = containerRect.width / 2 - 20;
const angle = Math.random() * 2 * Math.PI;
const radius = Math.sqrt(Math.random()) * maxRadius;
const finalX = centerX + radius * Math.cos(angle) - 20;
const finalY = centerY + radius * Math.sin(angle) - 20;
Se determina una posición final aleatoria para el topping dentro de un área circular:

Se calcula el centro del contenedor y se define un radio máximo (con un margen de 20px).

Se genera un ángulo aleatorio y se utiliza la raíz cuadrada de un número aleatorio para distribuir uniformemente los toppings.

Se calcula la posición final restando 20px para ajustar el centro del topping.

// Posición inicial en el centro de la pizza
topping.style.left = ${centerX - 20}px;
topping.style.top = ${centerY - 20}px;
container.appendChild(topping);
Se posiciona inicialmente el topping en el centro del contenedor (ajustado en 20px) y se añade al contenedor.

// Animar hacia la posición final
setTimeout(() => {
topping.style.left = ${finalX}px;
topping.style.top = ${finalY}px;
}, 50);
Se inicia una animación, con un retraso de 50 milisegundos, que mueve el topping desde el centro hasta la posición final aleatoria.

// Agregar ingrediente a la lista de selección y actualizar precio
const listItem = document.createElement('li');
listItem.innerHTML = <span>${ingredient.querySelector('span').textContent}</span><span>$${ingredient.dataset.price}</span>;
document.querySelector('.ingredients-list').appendChild(listItem);
updateTotalPrice();
Se crea un nuevo elemento de lista (li) para reflejar la selección del ingrediente:

Se inserta el nombre (obtenido del span interno del ingrediente) y el precio (desde data-price).

Se añade el elemento a la lista con la clase "ingredients-list".

Se llama a la función updateTotalPrice para recalcular el total. }

function updateTotalPrice() {
let total = 0;
document.querySelectorAll('.ingredients-list li span:last-child').forEach(priceEl => {
total += parseFloat(priceEl.textContent.replace('$', ''));
});
document.querySelector('.total-price').textContent = $${total.toFixed(2)};
}
Esta función se encarga de calcular el precio total de los ingredientes seleccionados:

Se recorre cada span que contiene el precio (el último span de cada li en la lista de ingredientes).

Se extrae el valor numérico eliminando el símbolo “$” y se acumula el total.

Finalmente, se actualiza el contenido del elemento con la clase "total-price" mostrando el precio total con dos decimales.

personaliza_pizza.css

Este archivo define los estilos para la sección de personalización de pizzas en la web de la Pizzería Mamma Mia, abarcando desde la presentación de la pizza y la animación de los ingredientes hasta la disposición de los controles para seleccionar los complementos. Esto asegura una experiencia interactiva y visualmente atractiva, facilitando futuras modificaciones y la integración con otros estilos del sitio.

personaliza_pizza.css - Estilos para el Personalizador de Pizza, Selección de Ingredientes y Animaciones 

.pizza-customizer {
    padding: 4rem 2rem;
    background: #fefefe;
  }
  
  .pizza-customizer .section-header {
    text-align: center;
    margin-bottom: 2rem;
  }
  
  .pizza-customizer h2 {
    font-size: 2.5rem;
    color: var(--color-primario);
    margin-bottom: 0.5rem;
  }
  
  .pizza-customizer .section-subtitle {
    color: var(--color-secundario);
    font-size: 1.2rem;
  }
  
  .customizer-container {
    display: flex;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
  }
  
  /* Área de la Pizza y Selección de Ingredientes */
  .pizza-area {
    flex: 2;
    position: relative;
    border: 1px solid #ddd;
    padding: 1rem;
    border-radius: 10px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .pizza-base {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle at center, #F8E0B8 60%, #D2A679 100%);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .pizza-base::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle at center, #FFEB3B 30%, #FBC02D 100%);
  }
  
  .toppings-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  
  .topping {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    pointer-events: none;
    user-select: none;
    transition: left 0.5s ease-out, top 0.5s ease-out;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
  }
  
  @keyframes pop {
    0% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1.2); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
  }
  
  .topping.pepperoni {
    animation: pop 0.6s ease-out;
    background: radial-gradient(circle, #E53935, #B71C1C);
  }
  
  .topping.mushrooms {
    animation: pop 0.6s ease-out;
    background: radial-gradient(circle, #A1887F, #5D4037);
    border-radius: 40% 40% 60% 60%;
  }
  
  .topping.olives {
    animation: pop 0.6s ease-out;
    background: radial-gradient(circle, #43A047, #1B5E20);
  }
  
  .topping.extra-cheese {
    animation: pop 0.6s ease-out;
    background: radial-gradient(circle, #FDD835, #FBC02D);
  }
  
  .ingredients-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    justify-content: center;
  }
  
  .ingredient {
    width: 80px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #eee;
    padding: 0.5rem;
    border-radius: 8px;
    background: #fafafa;
    transition: transform 0.2s;
  }
  
  .ingredient:hover {
    transform: scale(1.05);
  }
  
  .ingredient .ingredient-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 1rem;
  }
  
  .ingredient[data-ingredient="pepperoni"] .ingredient-icon {
    background-color: #D32F2F;
  }
  
  .ingredient[data-ingredient="mushrooms"] .ingredient-icon {
    background-color: #A1887F;
  }
  
  .ingredient[data-ingredient="olives"] .ingredient-icon {
    background-color: #388E3C;
  }
  
  .ingredient[data-ingredient="extra-cheese"] .ingredient-icon {
    background-color: #FBC02D;
  }
  
  .ingredient span {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-texto);
  }
  
  /* PANEL DE CONTROL */
  .control-panel {
    flex: 1;
    border: 1px solid #ddd;
    padding: 1rem;
    border-radius: 10px;
    background: #fff;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: fit-content;
  }
  
  .control-panel h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--color-primario);
  }
  
  .selected-ingredients {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #eee;
    padding: 0.5rem;
    border-radius: 5px;
    background: #f9f9f9;
  }
  
  .selected-ingredients ul {
    list-style: none;
  }
  
  .selected-ingredients li {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
  }
  
  .price-counter {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
  }
  
  .btn-add-to-cart {
    background: var(--color-primario);
    color: white;
    padding: 0.8rem;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 0.3s;
  }
  
  .btn-add-to-cart:hover {
    background: var(--color-secundario);
  }
  
  .pizza-spin {
    animation: spin 2s infinite linear;
  }
  
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  
  /* ELEMENTO: MANO ANIMADA */
  .hand {
    position: fixed;
    font-size: 2rem;
    pointer-events: none;
    z-index: 2000;
    transition: left 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), top 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

Explicación del código: " personaliza_pizza.css - Estilos para el Personalizador de Pizza, Selección de Ingredientes y Animaciones"

Estás viendo solo el 60% del contenido. Hazte Premium para acceder al tutorial completo.

← Volver a Tutoriales
Comunidad

Comentarios y valoraciones

No hay comentarios aún. ¡Sé el primero en opinar!