.service-banner{
    background-image: url('/images/SalaConsejoArbitral.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 500px;
}

@media (max-width: 480px) {
    .service-banner{
        background-image: url('/images/SalaConsejoArbitral.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 500px;
    }
}

.nunito{
    font-family: 'Nunito', serif;
    font-weight: bold;
}

.flip-card-container {
    perspective: 1000px; /* Le da profundidad a la escena */
}

/* 2. El elemento interior que realmente girará */
.flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.7s; /* Controla la velocidad del giro */
    transform-style: preserve-3d;
}

/* 3. La acción de girar cuando el cursor está sobre el contenedor */
.flip-card-container:hover .flipper {
    transform: rotateY(180deg);
}

/* 4. Estilos comunes para ambas caras de la tarjeta */
.front-face,
.back-face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Oculta el reverso de la cara (para Safari) */
    backface-visibility: hidden; /* Oculta el reverso de la cara */
}

/* 5. La cara trasera debe empezar ya girada */
.back-face {
    transform: rotateY(180deg);
}