/* style.css */

html {
scroll-behavior: smooth;
scroll-padding-top: 100px; 
}

.bg-grid {
background-size: 50px 50px;
background-image: 
linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

.glow {
position: absolute;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, rgba(0,0,0,0) 40%);
top: 30%;
right: -5%;
z-index: 0;
pointer-events: none;
}

.gradient-text {
background: linear-gradient(to right, #ffffff, #a3a3a3);
-webkit-background-clip: text; 
background-clip: text;         /* Propiedad estándar para compatibilidad */
-webkit-text-fill-color: transparent;
color: transparent;            
}

.badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 1rem;
border-radius: 9999px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
font-size: 0.875rem;
color: #a3a3a3;
}
.linkedin-icon{
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.hidden {
display: none;
}

#success-message {
animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Quita el icono original de las flechas */
.swiper-button-next::after, 
.swiper-button-prev::after {
    display: none !important;
}

/* Asegura que el contenedor de las fotos no corte el clic */
.mySwiper {
    padding: 0 10px; /* Un pequeño aire para que no pegue al borde */
}
/* --- ANIMACIÓN EN CASCADA PARA LOS MENSAJES --- */

/* 1. Estado inicial (Cuando las fotos NO se están viendo) */
/* Las hacemos transparentes, más chicas (escala 0.9) y un poco más abajo (translateY) */
.messageSwiper .swiper-slide > div > div {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. Estado Activo (Cuando el carrusel muestra este bloque) */
/* Vuelven a su tamaño 100%, opacidad total y posición original */
.messageSwiper .swiper-slide-active > div > div {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 3. El truco de la cascada (Retrasamos la animación de cada foto) */
.messageSwiper .swiper-slide-active > div > div:nth-child(1) { 
    transition-delay: 0.1s; /* La primera aparece casi al instante */
}
.messageSwiper .swiper-slide-active > div > div:nth-child(2) { 
    transition-delay: 0.3s; /* La segunda tarda un poco más */
}
.messageSwiper .swiper-slide-active > div > div:nth-child(3) { 
    transition-delay: 0.5s; /* La tercera es la última en aparecer */
}