.californiaBox{
 width: 100%;  
}

.californiaBox section{
    display: flex;    
    aspect-ratio: 4/1;
    padding: var(--short-padding);
    gap: var(--short-padding);
    min-height: 350px;   
}

.californiaBox-contenido{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.californiaBox-contenido h2{
    text-align: center;
    padding: 20px 0;
    background-color: #800;
    color: #fff;
}

.californiaBox-contenido a{
    display: block;
    padding: 20px 0;
    background-color: var(--gray);
    color:#fff;
    text-decoration: none;
    text-align: center;
}

.californiaBox-contenido a:hover{
    background-color: var(--principal-color);
    transition: background-color .2s ease-in-out;
}

.californiaBox-contenido p{
    padding: var(--space-padding);
    text-align: center;
}

.californiaBox-portada{
    flex: 2;
    overflow-x: hidden;
    display: flex;
}

.californiaBox-portada-carrousel{
    height: 100%;
    width: auto;
    display: flex;
    flex-wrap: nowrap;
    -webkit-animation: california-carrousel 10s linear infinite;
    animation: california-carrousel 10s linear infinite;
    animation-delay: 0.1s; /* Añadir un pequeño retraso */
    will-change: transform;
}

.californiaBox-portada-carrousel img{
    display: block;
    height: 100%;
    width: auto;
    object-fit: contain;
    object-position: center;
}

@keyframes california-carrousel {
    from{
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-50%);
    }    
}

@-webkit-keyframes california-carrousel {
    from{
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-50%);
    }  
}

@media (max-width:900px) {
    .californiaBox section{
        flex-direction: column-reverse;
        height: auto;
        min-height: auto;
        width: 100%;
    }

    .californiaBox-portada{
        min-height: 300px;
        width: 100%;
    }

    .californiaBox-contenido p{
        padding: 20px 0;

    }
    
}