@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");

.texto-banner {
    font-family: "Playfair Display", serif;
    font-size: 60px;
}

.service-banner {
    background-image: url("/images/PresentacionPortada.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-position-y: -200px;
    height: 550px;
}

@media (max-width: 480px) {
    .service-banner {
        background-image: url("/images/PresentacionPortada.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-position-x: -100px;
        height: 500px;
    }
    .texto-banner {
        font-family: "Playfair Display", serif;
        font-size: 30px;
    }
}

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

.texto-exp {
    font-family: "Playfair Display", serif;
    font-size: 20px;
}

.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);
}