/* =================
Base utilitaria
================= */
.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.card-shadow {
    box-shadow: 0 20px 60px rgba(0, 0, 0, .1);
}

.hover-scale {
    transition: transform .2s ease;
}

.hover-scale:hover {
    transform: scale(1.02);
}

.figma-modal {
    background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
}

.copy-button {
    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
}

.progress-line {
    transition: height .6s ease-out;
}

/* =================
Animaciones
================= */
@keyframes float-left {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-20px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes float-right {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(20px);
    }

    100% {
        transform: translateX(0);
    }
}

.animate-float-left {
    animation: float-left 8s ease-in-out infinite;
}

.animate-float-right {
    animation: float-right 8s ease-in-out infinite 1s;
}

/* Aparición */
.fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
}

.is-visible {
    opacity: 1;
    transform: none;
}

.stagger>* {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .6s ease, transform .6s ease;
}

.stagger.is-visible>* {
    opacity: 1;
    transform: none;
}

.stagger.is-visible>*:nth-child(1) {
    transition-delay: .1s;
}

.stagger.is-visible>*:nth-child(2) {
    transition-delay: .2s;
}

.stagger.is-visible>*:nth-child(3) {
    transition-delay: .3s;
}

/* =========================
TIMELINE VERTICAL (limpio)
========================= */
:root {
    /* Medidas */
    --badge: 56px;
    /* tamaño del badge (cuadrado) */
    --rail-w: 4px;
    /* grosor de la línea */
    --side-clearance: clamp(56px, 7vw, 96px);
    /* holgura desde el rail */
    --content-pad: clamp(20px, 3.5vw, 60px);
    /* padding lateral del copy */
    --item-gap: clamp(72px, 10vw, 120px);
    /* separación entre items */

    /* Colores morados */
    --violet-500: #874EE3;
    /* base */
    --violet-600: #6A35D6;
    /* más oscuro */
    --violet-400: #9B68E8;
    /* más claro */
    --violet-100: #EDE7FB;
    /* fondo del rail */
    --violet-glow: rgba(135, 78, 227, .45);
}

.timeline-container {
    position: relative;
    max-width: min(1100px, 95vw);
    margin: 0 auto;
    padding-inline: clamp(12px, 2vw, 24px);
}

/* Línea central y progreso */
.timeline-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - (var(--rail-w)/2));
    width: var(--rail-w);
    background: var(--violet-100);
    z-index: 1;
}

.timeline-progress {
    width: 100%;
    background: linear-gradient(180deg, var(--violet-400) 0%, var(--violet-600) 100%);
    height: 0%;
    transition: height .3s ease;
    border-radius: 2px;
}

/* Items */
.timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
    margin-bottom: var(--item-gap);
}

.timeline-item:last-child {
    margin-bottom: 0;
}

/* Alternado izquierda/derecha (desktop) */
.timeline-item:nth-child(odd) {
    flex-direction: row;
}

.timeline-item:nth-child(even) {
    flex-direction: row-reverse;
}

/* Contenido: ancho fluido sin invadir el rail */
.timeline-content {
    flex: 0 1 auto;
    width: min(480px, calc(50% - var(--side-clearance)));
    max-width: 100%;
}

.timeline-item:nth-child(odd) .timeline-content {
    padding-right: var(--content-pad);
    text-align: right;
}

.timeline-item:nth-child(even) .timeline-content {
    padding-left: var(--content-pad);
    text-align: left;
}

/* Badge centrado EXACTO en desktop/tablet */
.timeline-badge {
    position: absolute;
    top: 20px;
    left: calc(50% - (var(--badge)/2));
    /* misma fórmula que la rail */
    width: var(--badge);
    height: var(--badge);
    box-sizing: border-box;
    /* incluye el borde en el tamaño */
    border-radius: 18px;
    background: #f8fafc;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: transform .4s ease, box-shadow .4s ease, background .4s ease, color .4s ease, border-color .4s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
    border: 3px solid #e2e8f0;
}

.timeline-badge.active {
    background: linear-gradient(135deg, var(--violet-400), var(--violet-600));
    color: #fff;
    transform: scale(1.1);
    /* no mueve el centro */
    box-shadow: 0 12px 30px var(--violet-glow);
    border-color: var(--violet-500);
}

/* Ilustraciones */
.illu {
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .08);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
    background: #fff;
}

.illu:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
}

.illu img {
    width: 100%;
    height: clamp(180px, 26vw, 220px);
    object-fit: cover;
}

/* ===== Tablet (apila manteniendo badge arriba) ===== */
@media (max-width: 980px) {
    .timeline-item {
        flex-direction: column !important;
        text-align: center !important;
        margin-bottom: clamp(64px, 10vw, 100px);
    }

    .timeline-item:nth-child(odd) .timeline-content,
    .timeline-item:nth-child(even) .timeline-content {
        padding: 0;
        width: 100%;
        max-width: 100%;
        margin-top: calc(var(--badge) + 24px);
        /* deja hueco al badge absoluto */
        text-align: left !important;
    }

    .timeline-badge {
        top: 0;
    }
}

/* ===== Móvil (badge a la izquierda, rail alineada) ===== */
@media (max-width: 768px) {
    :root {
        --pi: 16px;
        /* padding lateral del contenedor */
        --gap: 24px;
        /* separación badge → contenido */
    }

    .timeline-container {
        padding-inline: var(--pi);
    }

    /* Rail centrada en la columna del badge */
    .timeline-rail {
        left: calc(var(--pi) + (var(--badge)/2) - (var(--rail-w)/2));
    }

    /* Grid: [badge] [contenido] */
    .timeline-item {
        display: grid !important;
        grid-template-columns: var(--badge) 1fr;
        column-gap: var(--gap);
        align-items: start;
        margin-bottom: 72px;
    }

    /* Badge en su columna (no absolute) */
    .timeline-badge {
        position: static;
        justify-self: center;
        align-self: start;
        transform: none;
    }

    .timeline-badge.active {
        transform: scale(1.1);
    }

    /* Contenido full width, alineado a la izquierda */
    .timeline-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 !important;
        text-align: left !important;
    }
}

/* Accesibilidad: menos movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {

    .fade-up,
    .stagger>*,
    .timeline-badge,
    .timeline-progress,
    .illu {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* (Opcional) Forzar títulos azules del timeline a morado sin tocar el HTML */
.timeline-content .text-blue-600,
.timeline-content .text-indigo-600 {
    color: var(--violet-500) !important;
}

/* --- FIX móvil: badge a la IZQUIERDA, alineado con el texto --- */
@media (max-width: 768px) {

    /* Dos columnas robustas (badge + contenido) */
    .timeline-item {
        display: grid !important;
        grid-template-columns: max(var(--badge), 44px) minmax(0, 1fr);
        grid-template-areas: "badge content";
        column-gap: var(--gap);
        align-items: start;
        text-align: left !important;
        /* anula el center del breakpoint tablet */
    }

    /* Colocar explícitamente cada área */
    .timeline-badge {
        grid-area: badge;
        position: static !important;
        /* entra en el flujo */
        justify-self: center;
        /* centra el badge sobre la rail */
        align-self: start;
        transform: none !important;
        margin: 0;
    }

    .timeline-content {
        grid-area: content;
        width: 100%;
        max-width: 100%;
        padding: 0 !important;
        margin-top: 0 !important;
        /* ANULA el empuje heredado de tablet */
        text-align: left !important;
    }

    /* Rail alineada a la columna del badge */
    .timeline-rail {
        left: calc(var(--pi) + (var(--badge)/2) - (var(--rail-w)/2)) !important;
        transform: none !important;
    }
}

/* Animaciones CSS (igual que tu ejemplo) */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-up.animate {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-left.animate {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-right.animate {
    opacity: 1;
    transform: translateX(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.scale-in.animate {
    opacity: 1;
    transform: scale(1);
}

.timeline-item {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-item.animate {
    opacity: 1;
    transform: translateX(0);
}

.logo-item {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-item.animate {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.logo-item:hover {
    transform: translateY(-5px) scale(1.05);
}

.stat-number {
    font-size: 3rem;
    font-weight: bold;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
    from {
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
    }

    to {
        box-shadow: 0 0 30px rgba(118, 75, 162, 0.5);
    }
}

.floating {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.bounce-in {
    opacity: 0;
    transform: scale(0.3);
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bounce-in.animate {
    opacity: 1;
    transform: scale(1);
}

.stagger-delay-1 {
    transition-delay: 0.1s;
}

.stagger-delay-2 {
    transition-delay: 0.2s;
}

.stagger-delay-3 {
    transition-delay: 0.3s;
}

.stagger-delay-4 {
    transition-delay: 0.4s;
}

.stagger-delay-5 {
    transition-delay: 0.5s;
}

.stagger-delay-6 {
    transition-delay: 0.6s;
}

/* Móvil: desactiva transformaciones “extra” de la imagen */
@media (max-width: 768px) {
    .team-image {
        transform: none !important;
    }

    .floating {
        animation: none !important;
    }
}

/* Alias: que 'reveal-up' se comporte igual que 'fade-up' */
.fade-up,
.reveal-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
}

/* Timeline: asegura que los items y badges queden por encima de la rail */
.timeline-rail {
    z-index: 0;
}

/* debajo de todo */
.timeline-item {
    z-index: 2;
}

/* por encima de la rail */
.stagger-delay-2 {
    transition-delay: 0.2s;
}

.stagger-delay-3 {
    transition-delay: 0.3s;
}

.stagger-delay-4 {
    transition-delay: 0.4s;
}

.stagger-delay-5 {
    transition-delay: 0.5s;
}

/* Nuevos efectos de entrada */
.slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-in-left.animate {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-in-right.animate {
    opacity: 1;
    transform: translateX(0);
}

.rotate-in {
    opacity: 0;
    transform: rotate(-180deg) scale(0.5);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.rotate-in.animate {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Efectos de hover mejorados */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/* Animación de flotación con diferentes delays */
.floating {
    animation: floating 3s ease-in-out infinite;
}

.floating.stagger-delay-1 {
    animation-delay: 0.5s;
}

.floating.stagger-delay-2 {
    animation-delay: 1s;
}

/* Glow pulsante mejorado */
.pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
    from {
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
        transform: scale(1);
    }

    to {
        box-shadow: 0 0 30px rgba(118, 75, 162, 0.5);
        transform: scale(1.02);
    }
}

/* Delays adicionales */
.stagger-delay-7 {
    transition-delay: 0.7s;
}

.stagger-delay-8 {
    transition-delay: 0.8s;
}

.stagger-delay-9 {
    transition-delay: 0.9s;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-left {
    animation: slideInLeft .8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-right {
    animation: slideInRight .8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Rotate in */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.5);
    }

    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

.rotate-in {
    animation: rotateIn 1s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.slide-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-in-up.animate,
.slide-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Progreso de línea suave */
.progress-line {
    transition: width .8s ease-out;
}

/* Hover mejorado para elementos interactivos */
.hover-scale {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Delays adicionales para más control de timing */
.stagger-delay-10 {
    transition-delay: 1s;
}

.stagger-delay-11 {
    transition-delay: 1.1s;
}

.stagger-delay-12 {
    transition-delay: 1.2s;
}

/* Mejora del efecto floating con más naturalidad */
@keyframes floating {

    0%,
    100% {
        transform: translateY(0px);
    }

    25% {
        transform: translateY(-5px);
    }

    50% {
        transform: translateY(-10px);
    }

    75% {
        transform: translateY(-5px);
    }
}

/* Pulso más sutil para elementos importantes */
.pulse-glow {
    animation: pulseGlow 3s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
    from {
        box-shadow: 0 0 15px rgba(102, 126, 234, 0.2);
    }

    to {
        box-shadow: 0 0 25px rgba(118, 75, 162, 0.4);
    }
}

/* Asegurar que las animaciones funcionen en ambos sistemas */
.fade-up.is-visible,
.fade-in-up.animate,
.stagger.is-visible,
.scale-in.animate,
.bounce-in.animate,
.slide-in-left.animate,
.slide-in-right.animate,
.slide-in-up.animate,
.rotate-in.animate,
.fade-in-left.animate,
.fade-in-right.animate {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1) rotate(0deg);
}