body {
font-family: Protest Riot;
margin: 0;
padding: 0;
}


p{
font-size: 20px;
justify-content: space-between;
}

li {
  list-style: none;
  margin-right: 25px;
  font-size: 30px;
}

.titular {
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  color: white;
  font-weight: bolder;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

.secciones {
  display: flex;
  justify-content:center;
  align-items: center;
}
ul {
  display: flex;
  justify-content: space-between;
  color: white;
}

.boton-naranja {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 180px;
  height: 60px;
  padding: 0;
  font-size: 28px;
  text-decoration: none;
  color: white;
  font-family: 'Protest Riot', sans-serif;
  background: orange;
  border-radius: 25px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}

/* También actualizamos la animación */
.boton-naranja:hover {
  transform: translateY(-8px);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
}

h1 {
  font-size: 80px;
  margin: 0;
  text-shadow: 4px 4px 0px #ffaa00;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  line-height: 1;
}

h1:hover {
  transform: translateY(-8px); /* El texto sube 6 píxeles */
  text-shadow: 10px 10px 0px #e69900; /* La sombra se hace más larga y oscura para el efecto 3D */
}

h2 {
  font-size: 70px;
  color: red;
  font-family: Protest Riot;
  margin-bottom: 10px;
  margin-top: -5px;
  -webkit-text-stroke: 1px white;
  text-shadow: 4px 4px 0px #ffaa00;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
}

h2:hover {
  transform: translateY(-6px); /* El texto sube 6 píxeles */
  text-shadow: 10px 10px 0px #e69900; /* La sombra se hace más larga y oscura para el efecto 3D */
}

header {
  position: relative;
  height: 100vh;
  background: url(fondo2.jpg);
  background-size: cover;
  background-position: center;
}

.logo-header {
    width: 120px;         /* O ajusta al tamaño deseado, por ejemplo, 200px */
    height: auto;       /* Mantiene la proporción */
    display: block;    /* Evita espacios no deseados */
}


.contenedor {
  max-width: 1280px;
  width: 90%;
  margin: auto;
}

/* Preparamos los elementos de la lista */
.secciones li {
  position: relative; /* Clave para la línea */
  cursor: pointer; /* Cambia el ratón a una manita */
  padding: 5px 0;
  transition: color 0.3s ease;
}

/* Creamos la línea invisible debajo de cada palabra */
.secciones li::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);

  width: 0%; /* Inicia invisible */
  height: 4px;
  background-color: #ffaa00;
  border-radius: 4px;

  transition: width 0.3s ease;
}

/* Hacemos que la línea crezca al pasar el ratón */
.secciones li:hover::after {
  width: 100%; /* Crece a lo ancho de la palabra */
}

/* Cambia el texto a naranja al pasar el ratón */
.secciones li:hover {
  color: #ffaa00;
}

/*inicio sección sobre mi*/

h3{
text-align: center;
font-size: 75px;
margin-top: 80px;
margin-bottom: 20px;
}

h3 span{
  position:relative;
  display: inline-block;
  z-index: 1;
}

h3 span::after{
  content:"";
  position: absolute;
  bottom: -4px;
  left: -5px;
  width: 110%;
  height: 18px;
  background-color: #ffaa00;
  z-index: -1;
  border-radius: 4px 8px 5px 9px;
  transform: rotate(-1.5deg);
}

/* 1. La sección abarca toda la pantalla */
#seccion-nosotros {
  width: 100%;
  padding: 40px 5%;
  position: relative;
  box-sizing: border-box;
  text-align: center;
}

/* 2. Forzamos estrictamente 3 columnas horizontales iguales */
#seccion-nosotros .contenedorparrafonosotros {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 25px !important;
  width: 100% !important;
  max-width: 1300px !important;
  margin: 0 auto !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}

/* 3. Estilo de cada tarjeta de texto (caja completa) */
#seccion-nosotros .caja-nosotros {
  background: #ffffff !important;
  padding: 25px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07) !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* Tamaño para los subtítulos (Misión, Visión) */
#seccion-nosotros .caja-nosotros h4 {
  font-size: 50px;
  color: #ff3300;
  margin-top: 15px;
  margin-bottom: 15px;
  font-weight: bold;
}

/* Reduce el tamaño del título solo en la tercera caja para que encaje mejor */
#seccion-nosotros .caja-nosotros:nth-child(3) h4 {
  font-size: 34px;
  line-height: 1.2;
}

/* Tamaño para el texto de los párrafos dentro de las cajas */
#seccion-nosotros .caja-nosotros p {
  font-size: 16px;
  margin: 0;
  line-height: 1.6;
  color: #333;
  text-align: center;
}

/* 4. Hacemos que el botón 'Visítanos' ocupe todo el ancho de abajo y se centre */
#seccion-nosotros .contenedorparrafonosotros .boton-2 {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 30px;
}

/* ================= ESTILOS: MOTIVO DEL DÍA ================= */
.contenedor-motivo-dia {
  grid-column: 1 / -1; /* Ocupa todo el ancho inferior de la sección */
  margin-top: 50px;
  text-align: center;
}

.titulo-motivo {
  font-size: 38px;
  color: #ff3300;
  margin-bottom: 25px;
  font-weight: bold;
}

.grid-motivos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.caja-motivo {
  background: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
  text-align: left;
}

.caja-motivo h5 {
  font-size: 18px;
  color: #ff3300;
  margin-top: 0;
  margin-bottom: 10px;
}

.caja-motivo p {
  font-size: 14px;
  color: #555;
  margin: 0;
  line-height: 1.5;
}

.contenedor-valores-seccion {
  grid-column: 1 / -1 !important; /* Ocupa todo el ancho disponible */
  width: 100%;
  margin: 0 auto;
  padding: 40px 0;
  text-align: center;
  box-sizing: border-box;
}
.grid-valores {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 por fila */
  gap: 30px;
  width: 100%;                          /* Asegura que use todo el espacio disponible */
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}

.caja-valor {
  display: flex;
  flex-direction: column;
  align-items: center !important;  /* Centra horizontalmente los elementos dentro de la caja */
  justify-content: center !important;
  text-align: center !important;
}

.icono-valor-img {
  width: 120px !important;
  height: auto;
  margin-left: auto !important;
    margin-right: auto !important;   /* Asegura que la imagen esté centrada en su espacio */
    margin-bottom: 10px !important;
    display: block !important;
  }

  #seccion-nosotros .titulo-valores,
  h3.titulo-valores {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin: 0 auto 30px auto !important; /* Centrado natural sin parches */
    font-size: 60px;
    white-space: normal !important;
    margin-bottom: 10px;
  }

  h4.titulo-motivo {
    color: #000;
  }

/* 1. LA RECETA DE LA ANIMACIÓN */
@keyframes aparecerHaciaArriba {
  0% {
    opacity: 0;
    transform: translateY(40px); /* Empieza 40px más abajo de su lugar original */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* Termina exactamente en su lugar */
  }
}

/* 2. LA CLASE PRINCIPAL QUE SE LE PONE AL HTML */
.animar-entrada {
  opacity: 0; /* Asegura que el elemento sea invisible antes de arrancar */
  /* Ejecuta la animación en 0.8 segundos de forma suave y se queda en su estado final (forwards) */
  animation: aparecerHaciaArriba 0.8s ease-out forwards;
}

/* 3. RETRASOS (Para el efecto cascada del video) */
/* El título aparece luego luego, el subtítulo espera tantito, el botón espera más */
.retraso-1 { animation-delay: 0.3s; }
.retraso-2 { animation-delay: 0.6s; }
.retraso-3 { animation-delay: 0.9s; }
.contenedor-sobremi {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  padding-top: 0px 0;
  padding-bottom: 80px;
}

.contenedor-sobremi img{
  width: 20%;
  border-radius: 50px;
  box-shadow: -12px -12px 0px 0px #ffaa00;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform: translate(0, 0);
}

.contenedor-sobremi img:hover {
  /* La imagen se mueve hacia arriba y a la izquierda */
  transform: translate(-6px, -6px);

  /* La sombra se hace más pequeña para cerrar el hueco */
  box-shadow: -6px -6px 0px 0px #ffaa00;
}

.contenedorparrafoyboton{
  width: 42%;
  text-align: left;
  max-width: 600px;
}

.boton-2{
  margin-top: 30px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 180px;
  height: 60px;
  padding: 0;
  font-size: 28px;
  text-decoration: none;
  color: white;
  font-family: 'Protest Riot', sans-serif;
  background: orange;
  border-radius: 25px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}

.boton-2:hover {
  transform: translateY(-8px);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
}

.contenedorparrafoyboton p{
font-family: "Montserrat" , sans-serif;
}

/* 1. Preparamos la sección completa para que sea el ancla */
section {
  position: relative;
}

/* 2. Estilos específicos y posición para el taco */
.taco-esquina {
  position: absolute !important;
  bottom: 10px !important;
  right: 20px !important;

  /* LA MAGIA DEL PORCENTAJE: */
  width: 15% !important;        /* Crece o se encoge según la pantalla */
  max-width: 250px !important;  /* Respeta tu tamaño original en PC para que no se haga gigante */
  min-width: 80px !important;   /* Evita que desaparezca en celulares muy chicos */

  z-index: 10 !important;

  /* ESTO ES LA MAGIA QUE BORRA EL RECUADRO NARANJA */
  box-shadow: none !important;
  border-radius: 0 !important;
  border: none !important;
  transform: none !important;
}

/*inicia sección Menú*/

h4{
text-align: center;
font-size: 75px;
margin-top: 80px;
margin-bottom: 20px;
}
h4 span{
  position:relative;
  display: inline-block;
  z-index: 1;
}

h4 span::after{
  content:"";
  position: absolute;
  bottom: -4px;
  left: -5px;
  width: 110%;
  height: 18px;
  background-color: #eb2d03;
  z-index: -1;
  border-radius: 4px 8px 5px 9px;
  transform: rotate(-1.5deg);
  }

.tagline-menu{
  text-align: center;
  font-family: "Montserrat", sans-serif;
  padding-top: 20px;
  font-weight: bolder;
  color: #eb2d03;
  font-size: 35px;
/* Un poco de espacio para que el trazo blanco no asfixie las letras */
  letter-spacing: 1px;

  /* Las primeras 8 sombras hacen el contorno blanco perfecto de 1px.
     La última sombra es tu efecto naranja original. */
  text-shadow:
    -1px -1px 0 white,  1px -1px 0 white,
    -1px  1px 0 white,  1px  1px 0 white,
    -1px  0px 0 white,  1px  0px 0 white,
     0px -1px 0 white,  0px  1px 0 white,

    /* Tu sombra naranja (la pasé a 3px para que asome bien detrás del borde blanco) */
    3px 3px 0px #ffaa00;
}



  /* =========================================
     CARRUSEL DE TACOS (SECCIÓN MENÚ)
========================================= */

/* 1. EL CONTENEDOR DEL CARRUSEL HORIZONTAL */
.carrusel-tacos {
  display: flex;
  gap: 30px; /* Separación entre cada tarjeta de taco */
  padding: 40px 20px;

  /* Habilita el desplazamiento horizontal */
  overflow-x: auto;

  /* Obliga a que al deslizar, se frene exactamente en una tarjeta (Efecto celular) */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

/* Truco para ocultar la barra de scroll de abajo y que se vea limpio */
.carrusel-tacos::-webkit-scrollbar {
  display: none;
}

/* 2. DISEÑO DE CADA TARJETA BLANCA */
.tarjeta-menu {
  /* Establece un tamaño fijo para cada recuadro (300px).
     El '0 0' evita que se aplasten o se estiren. */
  flex: 0 0 300px;

  /* Le dice al carrusel que centre esta tarjeta al detenerse */
  scroll-snap-align: center;

  /* Estética de la tarjeta */
  background-color: #ffffff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 8px 8px 0px 0px #eb2d03; /* Sombrita suave y elegante */
  text-align: center;
}

/* 3. LAS IMÁGENES PNG DENTRO DE LA TARJETA */
.tarjeta-menu img {
  width: 100%;
  height: auto;
  max-width: 220px; /* Tamaño máximo para que el taco no se salga de la tarjeta */
  margin: 0 auto;
  display: block;
  transition: transform 0.3s ease;
}

.tarjeta-menu:hover img {
  transform: scale(1.8); /* Cambia a 1.15 si quieres que crezca todavía más */
}

/* 4. LOS TÍTULOS DE LOS TACOS */
.tarjeta-menu p {
  font-family:"Protest Riot" sans-serif; /* Puedes cambiarla por la fuente de tu sitio */
  font-size: 22px;
  font-weight: bold;
  color: #333333;
  margin-top: 20px;
  margin-bottom: 0;
}

/* 1. El contenedor que envuelve carrusel y flechas */
.contenedor-carrusel-con-flechas {
  position: relative; /* Ancla para las flechas */
  display: flex;
  align-items: center;
}

/* 2. Diseño base de los botones (flechas) */
.flecha-carrusel {
  background-color: #ffaa00; /* Naranja taquero */
  color: white;
  border: none;
  border-radius: 50%; /* Círculo perfecto */
  width: 50px;
  height: 50px;
  font-size: 24px;
  cursor: pointer;
  position: absolute;
  z-index: 20; /* Siempre por encima de los tacos */
  box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}

/* Efecto al pasar el mouse */
.flecha-carrusel:hover {
  transform: scale(1.1); /* Se hace un poquito más grande */
}

/* 3. Posiciones individuales */
.flecha-izq {
  left: 10px;
}

.flecha-der {
  right: 10px;
}

/* 4. TRUCO PRO: Ocultar flechas en celular */
/* En celular es mejor deslizar con el dedo, las flechas solo estorban en pantallas chicas */
@media (max-width: 768px) {
  .flecha-carrusel {
    display: none;
  }
}

.contenedor-boton-menu {
  display: flex;
  justify-content: center; /* Esta es la orden absoluta para centrar en Flexbox */
  margin-top: 30px;
  padding-bottom: 80px;
}

/* 1. El fondo de los tacos solo se aplica al bloque superior */
.contenedor-tacos-con-fondo {
  background: url(fondo2.jpg); /* O tu imagen de fondo */
  background-size: cover;
  background-position: center;
  padding: 40px 0; /* Espacio interno para que luzca bien */
}

/* 2. El bloque de aguas queda limpio sin el fondo de tacos */
.subseccion-extras {
  background-color: #ffffff; /* O el color de fondo general de tu página */
  padding: 20px 20px;
  text-align: center;
}

.titulo-extras {
  font-size: 60px;
  margin-bottom: 30px;
  color: #333;
  margin-top: 10px;
}
.titulo-con-linea {
  position: relative;
  display: inline-block;
  margin-top: 200px;    /* Sube el título la distancia que necesites */
  margin-bottom: 90px;  /* Espacio hacia abajo antes de las tarjetas */
  color: #333;
}

/* Creamos la línea decorativa debajo del título */
.titulo-con-linea::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 4px;
  background-color: #ffaa00;
  border-radius: 4px;
}
/* Contenedor de las tarjetas de agua */
.contenedor-aguas {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 60px;
  margin-bottom: 20px;
}

/* Tarjeta AMARILLA (se queda estática en su lugar) */
.tarjeta-agua {
  background: #ffaa00;
  border-radius: 15px;
  width: 140px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  text-align: center;
}
.tarjeta-agua h4 {
  font-size: 18px; /* Prueba bajándolo a 16px o 18px para que encaje perfecto */
  margin-top: 65px;
  color: #000;
}

/* Contenedor de la imagen: CLAVE para cortar o permitir que sobresalga */
.contenedor-imagen-agua {
  width: 100%;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible; /* Permite que el vaso crezca fuera de los límites si es necesario */
  margin-bottom: 15px;
}

/* Imagen del vaso de agua con animación de crecimiento al pasar el mouse */
.contenedor-imagen-agua img {
  max-height: 350px;
  width: auto;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

/* EFECTO: Al pasar el cursor, solo el vaso de agua se hace más grande */
.tarjeta-agua:hover .contenedor-imagen-agua img {
  transform: scale(1.25) translateY(-10px); /* Crece un 25% y sube ligeramente */
}

/* Esto afecta EXCLUSIVAMENTE a las imágenes de los postres y no toca las aguas */
.subseccion-postres img {
  width: 200px; /* Cambia este porcentaje a tu gusto (ej. 70%, 65%, etc.) */
  height: auto;
  display: block;
  margin: 0 auto;
  margin-top: -10px;
}

/* =========================================
   SISTEMA DE FONDO CON CAÍDA Y OPACIDAD FINAL
========================================= */

/* 1. La ventana principal del menú (Modificada para contener los tacos en toda la sección) */
/* 1. La sección debe tener posición relativa para controlar las capas */
#seccion-menu {
  position: relative !important;
  z-index: 1;
}

/* 2. El contenedor de los tacos se manda al fondo absoluto */
.contenedor-tacos-animados {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1 !important; /* <--- Esto los manda detrás de todo */
  overflow: hidden;
}

/* 3. Todo tu contenido real del menú (textos, títulos, tarjetas) va en una capa superior */
.contenido-menu-fijo,
#seccion-menu > *:not(.contenedor-tacos-animados) {
  position: relative;
  z-index: 2; /* <--- Esto obliga a los textos a estar siempre encima */
}
/* =========================================
   CAMBIO DE COLORES PARA SALSAS (SIN ALTERAR DISEÑO)
========================================= */

/* Cambia el color del título principal ("Salsas") */
#seccion-salsas h4 {
  color: #fff; /* <--- Pon aquí el color que quieras para el título */
}

/* Cambia el color del subtítulo ("El sabor único de nuestros tacos") */
#seccion-salsas .tagline-menu {
  color: #eb2d03; /* <--- Pon aquí el color que quieras para el subtítulo */
}

/* Cambia el color del texto y fondo del botón "Ordenar ahora" en Salsas */
#seccion-salsas .boton-naranja {
  color: #ffffff;         /* <--- Color del texto del botón */
  background-color: #ff3300; /* <--- Color de fondo del botón */
}

/* Color del botón al pasar el mouse por encima */
#seccion-salsas .boton-naranja:hover {
  background-color: #cc2900; /* <--- Color al pasar el cursor */
}
/* =========================================
   ESTILOS EXCLUSIVOS PARA TARJETAS DE SALSAS
========================================= */
#carrusel-salsas .tarjeta-menu {
  background-color: #ffffff;
}

/* Opcional: Si quieres que el texto resalte mejor sobre el fondo amarillo/naranja, puedes ponerlo blanco */
#carrusel-salsas .tarjeta-menu p {
  color: #000;
}

#seccion-salsas {
  position: relative;
  background-color: #ffaa00; /* Fondo naranja uniforme */
  padding-top: 100px;
  padding-bottom: 100px;
}

/* Estilos para las curvas SVG */
.divisor-curva {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.divisor-curva svg {
  position: relative;
  display: block;
  width: 100%;
  height: 60px; /* Controla la altura de la curva */
}

.curva-top {
  top: 0;
}

.curva-bottom {
  bottom: 0;
  transform: translateY(2px);
}
#seccion-salsas {
  position: relative;
  overflow: hidden;
}

.contenedor-fuegos-animados {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

#seccion-salsas h4,
#seccion-salsas .tagline-menu,
#seccion-salsas .tarjeta-menu,
#seccion-salsas .contenedor-boton-menu {
  position: relative;
  z-index: 2;
}

.fuego-animado {
  position: absolute;
  width: 65px; /* Tamaño pequeño y estético */
  opacity: 0;
  /* Ejecuta la aparición inicial y luego se pasa infinitamente a la animación de flotar en su sitio */
  animation: aparecerYFlotar 1.0s ease-out forwards, flotarEnLugar 3.5s ease-in-out infinite;
}

/* Retrasamos el inicio de la flotación para que empiece justo después de que aparezcan */
.fuego-animado {
  animation-delay: 0s, var(--retraso-flotacion);
}

@keyframes aparecerYFlotar {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0.9; /* Tu opacidad preferida */
  }
}

/* Animación de flotación individual en su propio lugar */
@keyframes flotarEnLugar {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px); /* Sube y baja sutilmente */
  }
}

h5{
text-align: center;
font-size: 75px;
margin-top: 80px;
margin-bottom: 20px;
}
.tagline-Delivery{
text-align: center;
font-family: "Montserrat", sans-serif;
padding-top: 20px;
font-weight: bolder;
color: #eb2d03;
font-size: 35px;
/* Un poco de espacio para que el trazo blanco no asfixie las letras */
letter-spacing: 1px;

/* Las primeras 8 sombras hacen el contorno blanco perfecto de 1px.
   La última sombra es tu efecto naranja original. */
text-shadow:
  -1px -1px 0 white,  1px -1px 0 white,
  -1px  1px 0 white,  1px  1px 0 white,
  -1px  0px 0 white,  1px  0px 0 white,
   0px -1px 0 white,  0px  1px 0 white,

  /* Tu sombra naranja (la pasé a 3px para que asome bien detrás del borde blanco) */
  3px 3px 0px #ffaa00;
}
h5 span {
  position:relative;
  display: inline-block;
  z-index: 1;
}

/* 2. Dibujamos el subrayado rojo inclinado */
h5 span::after {
  content:"";
  position: absolute;
  bottom: -4px;
  left: -5px;
  width: 110%;
  height: 18px;
  background-color: #eb2d03;
  z-index: -1;
  border-radius: 4px 8px 5px 9px;
  transform: rotate(-1.5deg);
}

/* 1. Alineamos la caja que contiene los logos */
.contenedor-logos-delivery {
  display: flex;            /* Pone los logos en una fila horizontal */
  justify-content: center; /* Los centra en la pantalla */
  align-items: center;     /* Los alinea para que no queden chuecos */
  gap: 50px;               /* El espacio de separación entre cada logo */
  margin-top: 40px;        /* Espacio para que no se peguen al texto de arriba */
  padding-bottom: 60px;    /* Espacio final de la sección */
}

/* 2. Achicamos las imágenes gigantes */
.logo-app {
  width: 220px;  /* Este es el tamaño clave. Súbelo o bájalo a tu gusto */
  height: auto;  /* Evita que los círculos se deformen a óvalos */

  /* Un extra opcional: hace que se animen un poquito al pasar el mouse */
  transition: transform 0.3s ease;
}

.logo-app:hover {
  transform: scale(1.1); /* Efecto de crecimiento al pasar el cursor */
}
/* =========================================
   ANIMACIÓN DE LA MOTO (DELIVERY)
========================================= */

/* 1. El carril por donde pasa la moto */
.contenedor-moto {
  width: 100%;
  position: relative;
  height: 160px;       /* La altura del carril */
  margin-top: -40px;    /* Espacio para separarlo de los logos */
  overflow: hidden;    /* ¡Súper importante! Oculta la moto cuando sale de la pantalla para que no rompa tu diseño */
}

/* 2. La moto (Tamaño y orden de arranque) */
.moto-animada {
  width: 150px;        /* Hacemos la imagen más pequeña (ajústalo a tu gusto) */
  height: auto;
  position: absolute;
  bottom: 0;            /* La pegamos al piso del carril */

  /* Orden de animación: Nombre, tiempo que tarda en cruzar, velocidad constante, y que sea infinita */
  animation: manejarMoto 7s linear infinite;
}

/* 3. La receta del movimiento (De izquierda a derecha) */
@keyframes manejarMoto {
  0% {
    left: -200px; /* Empieza escondida afuera de la pantalla por la izquierda */
  }
  100% {
    left: 100%;   /* Termina su viaje saliendo por completo del lado derecho */
  }
  }

  #seccion-delivery {
  /* 1. 'top center' asegura que las motonetas se empiecen a dibujar desde el borde superior */
  background: linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65)), url('patrondelivery.png') repeat top center;

  /* 2. El padding de 1px encierra el margen del título, eliminando el hueco blanco sin mover tus letras */
  padding-top: 1px;
  margin-top: 0;
}

/* =========================================
   ESTILOS DEL PIE DE PÁGINA (ESTILO PREMIUM)
========================================= */

/* 1. Fondo principal */
.pie-de-pagina {
  background-color: #131313;
  color: #ffffff;
  padding: 60px 40px 20px 40px;
  font-family: Arial, sans-serif;
}

/* 2. Estructura de 3 columnas */
.contenedor-columnas {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 40px;
  border-bottom: 1px solid #333333; /* La línea sutil que separa la parte de abajo */
  gap: 40px;
}

.columna {
  flex: 1;
}

/* 3. Textos y Títulos */
.columna h2 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 2.2rem;
  line-height: 1.1;
}

.columna h4 {
  font-size: 1.3rem;
  margin-top: 0;
  margin-bottom: 20px;
}

.texto-direccion {
  font-size: 0.95rem;
  color: #cccccc; /* Gris claro para que no brille tanto como los títulos */
  line-height: 1.6;
  margin: 8px 0;
}

/* 4. Iconos de Redes Sociales (Tamaño controlado) */
.iconos-redes {
  display: flex;
  gap: 15px;
  margin-top: 25px;
}

.icono-red {
  width: 25px;
  height: 25px;
  border: 1px solid #555555; /* Borde estilo Taquearte */
  border-radius: 50%;
  padding: 10px;
  transition: border-color 0.3s ease;
}

.icono-red:hover {
  border-color: #ffffff; /* Brilla al pasar el mouse */
}

/* 5. Botón Blanco de Pedidos */
.btn-pedidos-footer {
  display: inline-block;
  background-color: #ffffff;
  color: #131313;
  padding: 12px 25px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  margin-top: 20px;
}

/* 6. Barra inferior (Copyright) */
.footer-inferior {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
}

.footer-inferior p,
.footer-inferior a {
  color: #888888;
  font-size: 0.85rem;
  text-decoration: none;
  margin: 0;
}
html {
  scroll-behavior: smooth;
}
/* Limpiamos el enlace para que mantenga el estilo de tu texto */
.enlace-direccion {
  text-decoration: none;
  color: inherit;
  display: inline-block; /* Asegura que el efecto funcione bien sobre el párrafo */
  transition: color 0.3s ease;
}

/* Subraya el texto y cambia de color al pasar el cursor (puedes ajustar el color #ffaa00 al tono naranja que usas) */
.enlace-direccion:hover {
  color: #ffaa00; /* Opcional: cambia al color naranja de tu marca */
}

.enlace-direccion:hover p {
  text-decoration: underline;
}

/* =========================================
   ESTILOS PARA LOS TACOS VECTORIALES (MENÚ)
========================================= */

/* Contenedor absoluto que cubre toda la sección del menú por detrás de extremo a extremo */
/* El contenedor de los tacos va al fondo de todo */
.contenedor-tacos-animados {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0; /* <--- CAMBIA ESTO A 0 (o -1) */
  overflow: hidden;
}

/* El contenido de tu menú (títulos, tarjetas, etc.) debe estar en una capa superior */
.contenido-menu-fijo {
  position: relative;
  z-index: 2; /* <--- UN NÚMERO MÁS ALTO PARA QUE ESTÉ ENCIMA */
}

/* Estilo y animaciones idénticas a los fuegos pero con los tacos */
.taco-vector-animado {
  position: absolute;
  width: 70px; /* Tamaño del taco vectorial */
  opacity: 0;
  animation: aparecerYFlotarTaco 1.0s ease-out forwards, flotarEnLugarTaco 3.5s ease-in-out infinite;
  animation-delay: 0s, var(--retraso-flotacion, 0.2s);
}

@keyframes aparecerYFlotarTaco {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1.0; /* Opacidad sutil para que luzca como fondo elegante */
  }
}

@keyframes flotarEnLugarTaco {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}