/*Servicios*/

#services {
    display: flex;
    flex-direction: row; /* Ajusta según sea necesario */
    flex-wrap: wrap; /* Permite que las tarjetas se ajusten en múltiples filas si es necesario */
    align-items: center; /* Centra las tarjetas verticalmente */
    justify-content: center; /* Centra las tarjetas horizontalmente */
    width: 80%; /* Ajusta según sea necesario */
    margin: auto; /* Centra el contenedor en la página */
    padding: 60px 0; /* Añade un poco de relleno arriba y abajo *//*
    /* Otros estilos */
}

#services h2 {
    margin-bottom: 20px; /* Espacio debajo del título */
    color: var(--color-primary); /* Color del título */
}

.service-card {
    position: relative; 
    perspective: 1000px; /* Importante para el efecto 3D */
    width: 100%;
    height: 100%;
    transition: transform 0.6s; /* Transición para el efecto de volteo */
    transform-style: preserve-3d; /* Mantiene el 3D al rotar */
    cursor: pointer;
    margin-bottom: 3%;
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Oculta la cara opuesta */
    transition: transform 0.6s;    /* Transición para el efecto de volteo */
}

/* Estilos para el efecto de cortina y marco en las imágenes */
.card-face.front {
    position: relative;
    width: 100%; /* Ancho del contenedor de la imagen */
    height: auto;
    overflow: hidden; /* Esconde cualquier parte de la imagen que desborde */
    margin: 10 auto; /* Centra el contenedor */
}

.card-face.front img {
    display: block;
    width: 100%; /* Reducir el ancho para acomodar el padding y el borde */
    max-height: 300px;
    object-fit: cover;
    overflow: hidden;
    background-color: var(--color-background); /* Color del marco */
    transition: transform 0.3s ease; /* Transición suave para el efecto zoom */ 
}

.card-face.front::after {
    content: ''; /* Necesario para el pseudoelemento */
    position: absolute;
    object-fit: cover;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra vertical y horizontalmente */
    width: 94%;
    height: 90%;
    background-color: var(--color-backshadow); /* Efecto de cortina */
    transition: opacity 0.3s ease; /* Transición suave de opacidad */
    z-index: 1;
}

.service-card:hover .card-face.front::after {
    opacity: 0; /* Elimina el efecto de cortina en hover */
}

.service-card:hover .card-face.front img {
    transform: scale(1.1); /* Efecto zoom en hover */
}

.card-face.front p {
    -webkit-text-stroke: 2px var(--color-secondary-page);
    font-weight: bold;
    font-size: 50px;
    position: absolute;
    text-align: justify;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-background);
    z-index: 2;
    transition: opacity 0.3s ease; /* Transición suave de opacidad */
}

.card-face.back {
    position: absolute;    
    text-align: center;
    top: 0%;
    left: 0%;
    transform: translate(-50%, -50%);
    transform: rotateY(180deg);
    border: 2px solid var(--color-secondary-page);
}

/* Estilos para voltear la tarjeta cuando se añade la clase 'is-flipped' */
.service-card.is-flipped .card-face.front {
    transform: rotateY(-180deg);
}

.service-card.is-flipped .card-face.back {
    transform: rotateY(0deg);
}

.service-card:hover .card-face.front p {
    opacity: 0; /* Oculta el texto en hover */
}