/* General Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.f-poppins{
font-family: 'Poppins', sans-serif; 
}

.glacial {
  font-family: 'Glacial Indifference', sans-serif;
}

/* Efectos generales */
.hover-scale {
transition: transform 0.3s ease;
}
.hover-scale:hover {
transform: scale(1.05);
}

.hover-lift {
transition: all 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Efectos de botones */
.btn-gold {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.btn-gold:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(197, 175, 104, 0.3);
}
.btn-gold::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: 0.5s;
}
.btn-gold:hover::after {
left: 100%;
}

.btn-black {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.btn-black:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Efectos de navegación */
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background-color: #C5AF68;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}

/* Efectos de imágenes */
.img-hover {
transition: all 0.5s ease;
}
.img-hover:hover {
filter: brightness(1.05);
}

/* Animación de entrada */
@keyframes fadeInUp {
from {
  opacity: 0;
  transform: translateY(20px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}

.animate-fadeInUp {
animation: fadeInUp 0.6s ease-out forwards;
}

/* Efecto de brillo en iconos sociales */
.social-icon {
transition: all 0.3s ease;
}
.social-icon:hover {
transform: scale(1.1);
filter: brightness(1.2);
}

/* Efecto de contador */
.counter {
position: relative;
}
.counter::before {
content: '';
position: absolute;
width: 40px;
height: 40px;
border: 2px solid #C5AF68;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: all 0.3s ease;
}
.counter:hover::before {
opacity: 1;
width: 60px;
height: 60px;
}

/* Animación de rotación para el icono de la flor */
@keyframes rotate {
from {
  transform: rotate(0deg);
}
to {
  transform: rotate(360deg);
}
}

.rotating-flower {
animation: rotate 10s linear infinite;
}

/* parallax */

.parallax {
background-image: url('/assets/images/dra-parallax.jpg');
height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

.parallax::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Overlay negro con 50% de opacidad */
z-index: 1;
}

.parallax > div {
position: relative;
z-index: 2; /* Asegura que el contenido esté por encima del overlay */
}


/* parallax */

.parallax {
background-image: url('/assets/images/dra-parallax.jpg');
height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

.parallax::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Overlay negro con 50% de opacidad */
z-index: 1;
}

.parallax > div {
position: relative;
z-index: 2; /* Asegura que el contenido esté por encima del overlay */
}