@view-transition {
    navigation: auto;
}

::view-transition-group(*) {
    animation-duration: 3s;
}

::view-transition-old(main-content) {
    animation: 1s ease-in both move-out;
}

::view-transition-new(main-content) {
    animation: 1s ease-in both move-in;
}

@keyframes move-out {
    from {
        transform: translateY(0%);
    }
    to {
        transform: translateY(-100%);
    }
}

@keyframes move-in {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0%);
    }
}

body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.logo {
    display: inline-block;
    width: clamp(56px, 5vw, 76px);
    height: clamp(56px, 5vw, 76px);
    background: linear-gradient(to top right, var(--blue), var(--veronica));
    vertical-align: middle;

    /* Aquí se "importa" el archivo */
    mask-image: url('../favicon/favicon.svg');
    -webkit-mask-image: url('../favicon/favicon.svg');
    mask-size: contain;
    -webkit-mask-size: contain;
}

.whatsapp {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: var(--color-accent);
    vertical-align: middle;

    /* Aquí se "importa" el archivo */
    mask-image: url('../images/whatsapp.svg');
    -webkit-mask-image: url('../images/whatsapp.svg');
    mask-size: contain;
    -webkit-mask-size: contain;
    transition: transform 0.5s ease-in-out, color 0.5s ease-in-out; /* Transiciones suaves */
    will-change: transform;
}

.instagram {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: var(--color-accent);
    vertical-align: middle;

    /* Aquí se "importa" el archivo */
    mask-image: url('../images/instagram.svg');
    -webkit-mask-image: url('../images/instagram.svg');
    mask-size: contain;
    -webkit-mask-size: contain;
    transition: transform 0.5s ease-in-out, color 0.5s ease-in-out; /* Transiciones suaves */
    will-change: transform;
}

.whatsapp:hover {
    transform: scale(1.25); /* Escala el icono al 120% de su tamaño original */
}

.instagram:hover {
    transform: scale(1.25); /* Escala el icono al 120% de su tamaño original */
}

.scroll-animation {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.scroll-animation.visible {
    opacity: 1;
    transform: translateY(0);
}

.card {
    transition: transform 0.5s ease-in-out, color 0.5s ease-in-out;
    will-change: transform;
}

.card:hover {
    transform: translateY(-10px); /* Levanta la tarjeta */
}

.moral {
    transition: transform 0.5s ease-in-out, color 0.5s ease-in-out; /* Transiciones suaves */
    will-change: transform;
}

.moral:hover {
    transform: scale(1.20);
}

.step {
    transition: transform 0.5s ease-in-out, color 0.5s ease-in-out; /* Transiciones suaves */
    will-change: transform;
}

.step:hover {
    transform: scale(1.15);
}

/** pasos */
/* --- Opción 1: Camino Sinuoso --- */
/* --- Estilos para la Opción 2: Línea de Tiempo Vertical con Animación de Scroll --- */
.timeline-item {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.timeline-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.timeline-line {
    width: 4px;
    background-color: #e5e7eb; /* gray-200 */
}

.timeline-dot {
    transition: transform 0.3s ease;
}

.timeline-item:hover .timeline-dot {
    transform: scale(1.2);
}


.glow-card {
    position: relative; /* Necesario para posicionar el brillo dentro */
    overflow: clip; /* Oculta el brillo que se sale de la tarjeta */
    z-index: 1; /* Asegura que la tarjeta esté por encima del fondo */
}

/* El elemento que crea el brillo */
.glow-card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    /* Elige los colores que más te gusten para el gradiente */
    background: radial-gradient(circle, var(--color-one), var(--color-three), transparent 50%);
    width: 350px; /* Ancho del brillo */
    height: 350px; /* Alto del brillo */

    /* La magia sucede aquí: un desenfoque muy grande */
    filter: blur(40px);

    /* Animación para que el brillo se mueva sutilmente */
    animation: orbit-glow 15s linear infinite, pulse 6s infinite;

    /* Lo ponemos detrás del contenido de la tarjeta */
    z-index: -1;
}

.pulse-animation {
    animation: pulse 5s linear infinite;
}

@keyframes orbit-glow {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) translateX(80px) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg) translateX(80px) rotate(-360deg);
    }
}

@keyframes pulse {
    0% {
        opacity: 100%;
    }
    50% {
        opacity: 50%;
    }
    100% {
        opacity: 100%;
    }
}