/* =====================================
   ESTILOS GENERALES
   ===================================== */
/* 
   Esta sección define los estilos base para toda la página.
   Se eliminan márgenes y rellenos por defecto, se establece 
   el comportamiento de desplazamiento suave y el fondo principal.
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Controla el desplazamiento suave entre secciones al usar enlaces internos */
html {
  scroll-behavior: smooth;
}

/* Define la fuente, color principal del texto y fondo general con degradado */
body {
  font-family: 'Poppins', sans-serif;
  color: #fff;
  background: linear-gradient(180deg, #BF0A30 0%, #8B0000 50%, #2C0000 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* =====================================
   NAVEGACIÓN SUPERIOR
   ===================================== */
/* 
   Configura el menú de navegación principal (parte superior),
   donde están los enlaces a las distintas secciones o páginas.
*/
header {
  background: rgba(0, 0, 0, 0.3);
  padding: 15px 0;
}

/* Contenedor de los enlaces del menú */
.top-nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
}

/* Espaciado entre los enlaces */
.top-nav li {
  margin: 0 20px;
}

/* Estilos visuales de los enlaces */
.top-nav a {
  color: white;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
}

/* Efecto al pasar el mouse sobre los enlaces */
.top-nav a:hover {
  color: #FFD700;
}

/* =====================================
   SECCIÓN PRINCIPAL (HERO)
   ===================================== */
/* 
   Esta es la parte principal del inicio, donde se muestra el texto
   principal y el mockup del teléfono con la app.
*/
.hero-landing {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 40px 20px;
  text-align: center;
}

/* Contenedor del texto principal (título y descripción) */
.hero-text {
  max-width: 500px;
  text-align: left;
  margin-left: 1px;
}

/* Título principal del hero */
.hero-text h1 {
  font-size: 2.2rem;
  margin-bottom: 10px;
  color: #FFD700;
}

/* Párrafos descriptivos dentro del hero */
.hero-text p {
  font-size: 1rem;
  margin-bottom: 10px;
}

/* Texto adicional o nota debajo del contenido principal */
.hero-text .nota {
  margin-top: 25px;
  display: block;
}

/* =====================================
   MOCKUP DEL TELÉFONO EN HERO
   ===================================== */
/* 
   Diseño del teléfono de muestra que aparece junto al texto
   para representar la app visualmente.
*/
.hero-image-mockup {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

/* Contenedor principal del teléfono */
.mobile-mockup {
  width: 230px;
  height: 450px;
  border: 12px solid #000;
  border-radius: 30px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

/* Pantalla interna del mockup */
.screen {
  width: 90%;
  height: 90%;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Imagen dentro del mockup (pantalla del teléfono) */
.app-screenshot {
  width: 100%;
  height: auto;
  display: block;
}

/* Parte superior del teléfono (simulación de notch) */
.notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 20px;
  background: #000;
  border-radius: 10px;
}

/* Parte inferior del teléfono (botón home visual) */
.home-button {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 6px;
  background: #222;
  border-radius: 10px;
  opacity: 0.8;
}

/* =====================================
   SECCIÓN MENÚ PREVIEW (INICIO)
   ===================================== */
/* 
   Vista previa del menú que aparece en el inicio.
   Muestra algunos platillos destacados.
*/
.menu-preview {
  padding: 40px 20px;
  background: rgba(255, 255, 255, 0.05);
}

/* Estructura en cuadrícula para mostrar los productos */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  justify-items: center;
}

/* Tarjetas de los platillos de muestra */
.menu-item-preview {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  transition: transform 0.3s;
  color: inherit;
  text-decoration: none;
  display: block;
}

/* Efecto al pasar el mouse sobre las tarjetas */
.menu-item-preview:hover {
  transform: scale(1.05);
  color: #FFD700;
}

/* Título y texto de cada platillo */
.item-preview-title {
  color: #FFD700;
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.item-preview-title,
.item-preview-description {
  color: #fff;
}

/* =====================================
   SECCIÓN UBICACIÓN
   ===================================== */
/* 
   Sección donde se muestra la dirección principal y descripción
   del punto de venta.
*/
.location-section {
  text-align: center;
  padding: 40px 20px;
}

/* Título de la sección de ubicación */
.location-title {
  font-size: 1.8rem;
  margin-bottom: 10px;
  color: #FFD700;
}

/* Dirección del negocio */
.location-address {
  max-width: 500px;
  margin: 10px auto;
  font-size: 1rem;
}

/* Descripción adicional (debajo del texto principal) */
.location-description {
  margin-top: 15px;
  line-height: 1.6;
}

/* =====================================
   BOTONES GENERALES
   ===================================== */
/* 
   Botones usados en distintas secciones para llamadas a la acción (CTA).
*/
.cta-button {
  display: inline-block;
  background-color: #FFD700;
  color: #000;
  padding: 10px 20px;
  border-radius: 25px;
  text-decoration: none;
  margin-top: 15px;
  font-weight: bold;
  transition: background 0.3s;
}

/* Cambio de color al pasar el mouse */
.cta-button:hover {
  background-color: #fff;
}

/* =====================================
   SECCIÓN DEL MENÚ COMPLETO
   ===================================== */
/* 
   Muestra todos los platillos del negocio en una cuadrícula.
*/
.menu-section {
  background: linear-gradient(180deg, #BF0A30 0%, #8B0000 60%, #2C0000 100%);
  padding: 80px 20px;
  color: #fff;
  text-align: center;
}

/* Título general del menú */
.menu-title {
  font-size: 2.5rem;
  color: #FFD700;
  margin-bottom: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Texto introductorio antes del menú */
.menu-intro {
  font-size: 1.2rem;
  color: #f9f9f9;
  opacity: 0.9;
  margin-bottom: 50px;
}

/* Cuadrícula del menú completo */
.menu-grid-full {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  justify-items: center;
}

/* Tarjetas completas de los platillos */
.menu-item-full {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 215, 0, 0.5);
  border-radius: 15px;
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
  max-width: 300px;
}

/* Efecto de elevación al pasar el mouse */
.menu-item-full:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
  border-color: #FFD700;
}

/* Contenedor de la imagen del platillo */
.item-img-container {
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 15px;
}

/* Imagen dentro de la tarjeta del platillo */
.item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* Efecto de zoom en la imagen al pasar el mouse */
.menu-item-full:hover .item-image {
  transform: scale(1.1);
}

/* Título y descripción de los platillos */
.item-title-full {
  font-size: 1.4rem;
  color: #FFD700;
  margin-bottom: 8px;
  font-weight: 600;
}

.item-description-full {
  font-size: 1rem;
  color: #f1f1f1;
  opacity: 0.9;
}

/* Precio con fondo dorado */
.price {
  color: #fff;
  font-size: 1rem;
  background: #FFD700;
  color: #2C0000;
  padding: 3px 8px;
  border-radius: 6px;
  margin-left: 8px;
}

/* =====================================
   SECCIÓN CTA MENÚ
   ===================================== */
/* 
   Llamado a la acción final invitando a hacer pedidos o contactar.
*/
.menu-cta-section {
  background: none;
  color: #fff;
  text-align: center;
  padding: 40px 20px;
  margin: 50px auto;
}

/* Título y textos del CTA */
.menu-cta-title {
  font-size: 2rem;
  font-weight: 700;
  color: #FFD700;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.menu-cta-slogan {
  font-size: 1.2rem;
  color: #f9f9f9;
  margin-bottom: 15px;
  opacity: 0.9;
}

.menu-cta-note {
  font-size: 1rem;
  color: #f1f1f1;
  margin-bottom: 20px;
  opacity: 0.8;
}

/* Botón de pedido principal */
.contact-number-hero {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.btn-order {
  font-size: 1rem;
  padding: 10px 20px;
  background: #FFD700;
  color: #2C0000;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-order:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

/* =====================================
   SECCIÓN UBICACIÓN DETALLADA
   ===================================== */
/* 
   Aquí se muestra el mapa de ubicación exacta y el botón de dirección.
*/
.location-fixed-main {
  text-align: center;
  padding: 40px 20px;
}

.fixed-location-box {
  max-width: 600px;
  margin: 0 auto;
}

/* Contenedor del mapa (Google Maps incrustado) */
.map-container {
  margin: 20px 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.map-container iframe {
  width: 100%;
  height: 300px;
  border: 0;
}

/* Botón que lleva a la ubicación en el mapa */
.cta-button.map-button {
  background-color: #FFD700;
  color: #2C0000;
  border-radius: 8px;
}

.cta-button.map-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

/* =====================================
   SECCIÓN GIRO Y PROMOCIONES
   ===================================== */
.location-current-gira {
  text-align: center;
  padding: 40px 20px;
}

/* Lista de ubicaciones o promociones activas */
.location-current-gira .gira-list {
  display: inline-block;
  text-align: left;
  padding: 0;
  margin: 20px 0;
  list-style-position: inside;
}

.location-current-gira .cta-button {
  margin-top: 20px;
}

/* =====================================
   SECCIÓN PROMOCIONES
   ===================================== */
.menu-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 50px 20px;
}

.menu-hero h1,
.menu-hero h2,
.menu-hero p {
  margin-bottom: 25px;
  line-height: 1.5;
}

.menu-hero h1,
.menu-hero h2 {
  color: #FFD700;
}

.gira-locations p {
  margin-bottom: 15px;
}

/* =====================================
   CARTEL Y PROMOCIONES VISUALES
   ===================================== */
/* 
   Imágenes grandes de promociones o pancartas destacadas.
*/
.pancarta-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin-top: 40px;
}

.gira-pancarta,
.promocion-mensual {
  max-width: 800px;
  width: 90%;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto de agrandado al pasar el mouse */
.gira-pancarta:hover,
.promocion-mensual:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

/* =====================================
   SECCIÓN CONTACTO
   ===================================== */
/* 
   Sección donde se muestran los datos de contacto y botón para llamar.
*/
.contact-section {
  text-align: center;
  padding: 80px 20px;
}

.contact-title {
  font-size: 2rem;
  color: #FFD700;
  margin-bottom: 20px;
}

.contact-info {
  font-size: 1rem;
  margin-bottom: 30px;
  color: #fff;
}

.contact-call-button {
  font-size: 1rem;
  padding: 10px 20px;
  border-radius: 8px;
}

/* =====================================
   MEDIA QUERIES (RESPONSIVIDAD)
   ===================================== */
/* 
   Ajusta el diseño para pantallas pequeñas (tablets y móviles).
*/
@media (max-width: 768px) {
  .hero-landing {
    flex-direction: column;
    padding: 30px 10px;
  }

  .hero-text h1 {
    font-size: 1.8rem;
  }

  .hero-text p {
    font-size: 0.95rem;
  }

  .menu-grid {
    grid-template-columns: 1fr;
  }

  .top-nav ul {
    flex-direction: column;
  }

  .top-nav li {
    margin: 10px 0;
  }

  .mobile-mockup {
    width: 180px;
    height: 360px;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 0.9rem;
  }

  .hero-text h1 {
    font-size: 1.5rem;
  }

  .cta-button {
    padding: 8px 16px;
  }

  .mobile-mockup {
    width: 140px;
    height: 280px;
  }
}

/* =====================================================
   ANIMACIONES DE TRANSICIÓN ENTRE APARTADOS
===================================================== */
/* 
   Aplica una animación suave al cambiar entre páginas o secciones.
   Hace que el contenido aparezca poco a poco al cargar.
*/
body {
  opacity: 0;
  animation: fadeIn 0.8s ease-in forwards;
}

/* Define la animación de aparición gradual */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}