@font-face {
  font-family: 'atwic';
  src: url('../tipografia/Atwic/font/Atwic-Bold.ttf');
}

@font-face {
  font-family: 'baloo';
  src: url('../tipografia/baloo/baloo/Baloo-Regular.ttf');
}

@font-face {
  font-family: 'dimbo';
  src: url('../tipografia/dimbo/Dimbo\ Regular.ttf');
}

body {
  overflow-x: hidden;
  font-family: 'atwic';
  background-color: #4e9f42 !important;
  margin: 0;
  padding: 0;
}
.vista_principal{
  background-image: linear-gradient(to right top, #4a731c, #5c8424, #6f962b,#b0c944,#c8db4d, #83a833);
}
.navbar_productos{
  background-image: url(../img/nuestros_productos/navbar/panadero.webp);
  background-size: contain;
}
/* Animaciones */
.flotante {
  position: fixed;
  bottom: 30px;
  right: -590px;
  z-index: 100;
}
.flotante img {
  width: 11%;
}
.flotante:hover img {
  animation: ring 1s ease-in-out;
}
.flotante2 {
  position: fixed;
  bottom: 25px;
  left: 30px;
  z-index: 100;
}

.flotante2 a {
  display: inline-block; /* Esto hace que el ancho se ajuste al contenido */
}

.flotante2 img {
  width: 75.78px; 
  height: auto; /* Mantiene la proporción */
}

.flotante2:hover img {
  animation: ring 1s ease-in-out;
}

.logo_principal{
  animation: escalar 3.5s ease-in-out infinite;
}
.pan_superior{
  animation: flotante 3.5s ease-in-out infinite;
}
.pan_superior_derecho{
  animation: flotante_canela 3.5s ease-in-out infinite;
}
.pan_inferior{
  animation: flotante-bottom 3.5s ease-in-out infinite;
}
.pan_inferior_izquierdo{
  animation: flotante-izquierdo 3.5s ease-in-out infinite;
}
.pan_central_derecho{
  animation: rotacionDerecha 3.5s ease-in-out infinite;
}
.pan_central_izquierdo{
  animation: rotacionIzquierda 3.5s ease-in-out infinite;
}
.pan_inferior_central{
  animation: flotante_queque 3.5s ease-in-out infinite;
}
@keyframes flotante {
  0% {
    transform: translateY(0px);
    /* Posición inicial */
  }

  50% {
    transform: translateY(-30px);
    /* Movimiento hacia arriba */
  }

  100% {
    transform: translateY(0px);
    /* Vuelve a la posición inicial */
  }
}
@keyframes flotante_canela {
  0%, 100% {
    transform: 
      
       
      translateY(0px)
      translateX(0px) ;
  }
  50% {
    transform: 
      translateY(0px) 
      translateX(-20px);
  }
  100%{
    transform: 
      
       
      translateY(0px)
      translateX(0px) ;
  }
}
@keyframes flotante_queque {
  0%, 100% {
    transform: 
      
       
      translateY(0px)
      translateX(0px) ;
  }
  50% {
    transform: 
      translateY(0px) 
      translateX(20px);
  }
  100%{
    transform: 
      
       
      translateY(0px)
      translateX(0px) ;
  }
}


@keyframes flotante-bottom {
  0% {
    transform: translateY(0px);
    /* Posición inicial */
  }

  50% {
    transform: translateY(30px);
    /* Movimiento hacia arriba */
  }

  100% {
    transform: translateY(0px);
    /* Vuelve a la posición inicial */
  }
}
@keyframes flotante-izquierdo {
  0% {
    transform: translateY(0px);
    /* Posición inicial */
  }

  50% {
    transform: 
    translateY(0px)
    translateX(-50px);
    /* Movimiento hacia arriba */
  }

  100% {
    transform: translateY(0px);
    /* Vuelve a la posición inicial */
  }
}

@keyframes rotacionDerecha {
  0% {
    transform: rotate(0deg);
    /* Posición inicial */
  }

  50% {
    transform: rotate(5deg);
    /* Completa una rotación */
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes rotacionIzquierda {
  0% {
    transform: rotate(0deg);
    /* Posición inicial */
  }

  50% {
    transform: rotate(-5deg);
    /* Completa una rotación */
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes escalar {
  0% {
      transform: scale(1); /* Tamaño original */
  }
  50% {
      transform: scale(0.9); /* Escala a la mitad de su tamaño */
  }
  100% {
      transform: scale(1); /* Vuelve al tamaño original */
  }
}

.transition {
  transition: transform 0.5s ease, opacity 0.5s ease; /* Duración y tipo de transición */
}

.scale-out {
  transform: scale(0); /* Reduce el tamaño a 0 */
  opacity: 0; /* Hace que sea invisible */
}

.scale-in {
  transform: scale(1); /* Tamaño normal */
  opacity: 1; /* Completamente visible */
}

.scale-start {
  transform: scale(0.1); /* Comienza un poco pequeño */
  opacity: 0; /* Inicialmente invisible */
}
@keyframes ring {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(15deg); }
  20% { transform: rotate(-10deg); }
  30% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
  60% { transform: rotate(-5deg); }
  70% { transform: rotate(5deg); }
  80% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}



         .recipe-card {
            position: relative;
            overflow: hidden;
        }
        
        .recipe-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(64, 164, 0, 0.1), rgba(253, 240, 1, 0.1));
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 1;
            border-radius: 0.75rem;
        }
        
        .recipe-card:hover::before {
            opacity: 1;
        }
        
        .recipe-card img {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .recipe-card:hover img {
            transform: scale(1.1);
            filter: brightness(1.1) contrast(1.1);
        }
        
        .recipe-button {
            transition: all 0.3s ease;
            transform: translateY(10px);
            opacity: 0.9;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        .recipe-card:hover .recipe-button {
            transform: translateY(0);
            opacity: 1;
            box-shadow: 0 8px 25px rgba(64, 164, 0, 0.3);
        }
        
        .floating-animation {
            animation: float 3s ease-in-out infinite;
        }
        
        .floating-animation:nth-child(2) {
            animation-delay: 1s;
        }
        
        .floating-animation:nth-child(3) {
            animation-delay: 2s;
        }
        
        @keyframes float {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-10px);
            }
        }
        
        .shine-effect {
            position: relative;
            overflow: hidden;
        }
        
        .shine-effect::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: left 0.5s;
        }
        
        .shine-effect:hover::after {
            left: 100%;
        }