@keyframes flotarArriba {
    0% {
        transform: translateY(100px);
    }
    100% {
        transform: translateY(0);
    }
}

.card {
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    min-height: 450px;
    /* Fondo con gradiente vivo para que el líquido refleje los colores */
    background: linear-gradient(135deg, #0f172a, #1e293b); 
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

    animation: flotarArriba 2.0s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.card-left {
    background: linear-gradient(135deg, #182540, #217F77);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 41.666667%; /* 5/12 columnas */
}

.card-left-content {
    text-align: center;
    padding: 2rem;
}

.card-right {
    /* 1. Fondo translúcido exacto al estilo de referencia (25% opacidad) */
    background: rgba(255, 255, 255, 0.25); 
    
    /* 2. Desenfoque de cristal */
    backdrop-filter: blur(45px);
    -webkit-backdrop-filter: blur(45px);
    
    /* 3. Borde superior e izquierdo muy iluminados (simula el brillo del líquido/cristal) */
    border-top: 1px solid rgba(255, 255, 255, 0.75);
    border-left: 1px solid rgba(255, 255, 255, 0.75);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    
    /* 4. Sombra exterior y brillo interno (efecto volumen líquido) */
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3), 
        inset 0 0 15px rgba(255, 255, 255, 0.15);
    
    /* Propiedades de diseño */
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 0 58.333333%; /* 7/12 columnas */ 
}

/* Para pantallas pequeñas */
@media only screen and (max-width: 600px) {
    .card {
        flex-direction: column;
        min-height: auto;
    }
    
    .card-left,
    .card-right {
        flex: 0 0 100%;
        min-height: 250px;
    }
}

.card-right input[type="text"],
.card-right input[type="email"] {
    color: #ffffff;
}

select {
    border-radius: 20px !important;
}

label {
    color: white !important;
}

h5 {
    color: white !important;
}

p {
    color: white !important;
}


/* Estilos del carrusel minimalista */
/* Estructura principal de la tarjeta izquierda */
.card-left {
    background: linear-gradient(135deg, #182540, #217F77);
    color: white;
    display: flex;
    flex-direction: column;
    flex: 0 0 41.666667%; /* 5/12 columnas */
    position: relative;
    overflow: hidden;
    padding: 0; /* Quitamos padding externo para controlar los espacios a ras */
}

.card-left-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Espaciado superior exclusivo para el logo */
/* La tarjeta izquierda ahora usa la imagen del carrusel como fondo dinámico en pantalla completa */
.card-left {
    background: #182540; /* Color de respaldo por si tarda en cargar */
    color: white;
    display: flex;
    flex-direction: column;
    flex: 0 0 41.666667%; 
    position: relative;
    overflow: hidden;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.card-left-content {
    /* position: relative; */
    z-index: 5; /* Asegura que el logo por encima de las fotos del fondo */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 15px;
}

.card-left-content > img {
    width: 100%;
    max-width: 330px;
    margin: 0 auto;
    z-index : 9 !important;
}

/* El carrusel se vuelve el fondo absoluto de todo el panel izquierdo */
.image-carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Detrás del logo */
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
}

.carousel-slide.active {
    opacity: 1;
    pointer-events: auto;
}

/* La imagen cubre todo el fondo con una capa oscura encima */
.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Capa oscura semitransparente sobre la foto para que el logo blanco resalte perfecto */
.image-carousel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.5) 25%, rgba(15, 23, 42, 0.1) 50%, rgba(15, 23, 42, 0.7) 100%);
    pointer-events: none;
}

/* Indicadores flotantes abajo del todo */
.carousel-dots {
    position: absolute;
    bottom: 25px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 10;
}

.carousel-dots .dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}

.carousel-dots .dot.active {
    background: #ffffff;
    transform: scale(1.3);
}