/* Estética Industrial de Software */
    :root {
        --brand-color: #2D4B37;
        --text-main: #1a1a1a;
    }
    
    body {
        background-color: #fcfcfc;
        color: var(--text-main);
    }

    .hero-split {
        padding: 100px 0;
        background: linear-gradient(180deg, #f8fdf9 0%, #ffffff 100%);
        border-bottom: 1px solid #eee;
    }

    .badge-soft {
        background-color: rgba(45, 75, 55, 0.1);
        color: var(--brand-color);
        padding: 8px 16px;
        border-radius: 50px;
        font-weight: 600;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .btn-enterprise {
        background-color: var(--brand-color);
        color: white;
        padding: 14px 32px;
        border-radius: 6px; /* Bordes menos redondeados = más serio */
        font-weight: 600;
        transition: 0.3s;
        border: none;
    }

        .btn-enterprise:hover {
            background-color: #1e3325;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

    .card-feature {
        border: 1px solid #eee;
        border-radius: 12px;
        padding: 40px;
        background: white;
        transition: 0.3s;
    }

        .card-feature:hover {
            border-color: var(--brand-color);
            box-shadow: 0 20px 40px rgba(0,0,0,0.05);
        }

    .system-preview {
        background: white;
        border-radius: 12px;
        box-shadow: 0 40px 80px rgba(0,0,0,0.15);
        border: 1px solid #ddd;
        overflow: hidden;
    }

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

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

.animar-entrada {
    animation: fadeInUp 1.0s ease-out forwards;
}

/* Retrasos para que no aparezca todo junto (se ve más pro) */
.delay-1 {
    animation-delay: 0.2s;
    opacity: 0;
}

.delay-2 {
    animation-delay: 0.4s;
    opacity: 0;
}

.delay-3 {
    animation-delay: 0.6s;
    opacity: 0;
}

/* Recuperar estilos de botones y fondos para Login/Register */
.btn-primary, .btn-syscaw {
    background-color: #2D4B37 !important;
    border-color: #2D4B37 !important;
    color: white !important;
    border-radius: 6px; /* Estilo serio */
}

    .btn-primary:hover {
        background-color: #1e3325 !important;
    }

/* Estilo para las tarjetas de Login/Register */
.card {
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.card-header {
    background-color: #2D4B37 !important;
    color: white !important;
    border-radius: 12px 12px 0 0 !important;
}
.card-feature {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .card-feature:hover {
        transform: translateY(-10px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    }

/* ajustá el carrusel */
.carousel-inner {
    height: 350px; /* ajustá según tu diseño */
}

    .carousel-inner img {
        height: 100%;
        width: 100%;
        object-fit: contain;
        background: #fff;
    }

/* transición suave */
.carousel-item {
    transition: opacity 0.8s ease-in-out;
}

    /* imagen base */
    .carousel-item img {
        transition: transform 4s ease;
        transform: scale(1);
    }

    /* imagen activa (zoom lento) */
    .carousel-item.active img {
        transform: scale(1.05);
    }

/* ajustá flechas del carrusel */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1);
    background-color: rgba(0,0,0,0.4);
    border-radius: 50%;
    padding: 12px;
}