/* service-cards.css */
.service-cards-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 2rem;
    padding: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

.service-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
}

/* Estilos para el estado normal */
.card-default {
    padding: 2rem;
    height: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: start;
    min-height: 430px;
}
.card-default.card-1{
    background-image: url(https://frogmi.com/wp-content/uploads/2025/02/Grupo-41907ES.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}
.card-default.card-1.card-1-en{
    background-image: url(https://frogmi.com/wp-content/uploads/2025/02/Grupo-41908en.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}
.card-1 h3, .card-2 h3, .card-3 h3{
    font-size: 33px!important;
    color:white!important;
}

 .card-1 p, .card-2 p, .card-3 p{
    color:white!important;
    font-size: 16px!important;
    font-weight: 600!important;

 }
 .card-4 h3{
color:#000000!important;
font-size: 33px!important;

 }

 .card-4 p{
    color:#000000!important;
    font-size: 16px!important;
    font-weight: 600!important;
     }
.card-default.card-2{
    background-image: url(https://frogmi.com/wp-content/uploads/2025/02/Grupo-41909.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}
.card-default.card-2.card-2-en{
    background-image: url(https://frogmi.com/wp-content/uploads/2025/02/Grupo-41910.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}
.card-default.card-3{
    background-image: url(https://frogmi.com/wp-content/uploads/2025/02/ESGrupo-41922.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}
.card-default.card-3.card-3-en{
    background-image: url(https://frogmi.com/wp-content/uploads/2025/02/EN.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}
.card-default.card-4{
    background-image: url(https://frogmi.com/wp-content/uploads/2025/02/esGrupo-41931.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}
.card-default.card-4.card-4-en{
    background-image: url(https://frogmi.com/wp-content/uploads/2025/02/enGrupo-41944.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}
.card-default .content-wrapper {
    display: block;
    text-align: left;
    gap: 0.5rem;
}
.card-default .content-wrapper h3{
margin-bottom: 10px;
}

.icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon svg {
    width: 24px;
    height: 24px;
    color: #666;
}

.service-card h3 {
    font-size: 1.25rem;
    color: #333;
    margin: 0;
    font-weight: 600;
}

.service-card p {
    color: #666;
    margin: 0;
    line-height: 1.5;
    font-size: 17px!important;
}

/* Estilos para el estado hover */
.card-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 2rem;
    display: grid;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}



.service-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-card li {
    margin: 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.service-card li::before {
    content: "✓";
    color: currentColor;
}

.learn-more {
    display: inline-block;
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border: 1px solid white;
    border-radius: 20px;
    margin-top: 1rem;
    transition: all 0.3s ease;
    text-align: center;
}

.learn-more:hover{
    color:#000000!important;
}

/* Estados hover específicos para cada tarjeta */
.service-card:nth-child(1):hover {
    background-image: url(https://frogmi.com/wp-content/uploads/2025/02/3Enmascarar-grupo-3210.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.service-card.service-en:nth-child(1):hover {
    background-image: url(https://frogmi.com/wp-content/uploads/2025/02/uno-en.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.service-card:nth-child(2):hover {
    background-image: url(https://frogmi.com/wp-content/uploads/2025/02/dos-esp.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;}
    .service-card.service-en:nth-child(2):hover {
        background-image: url(https://frogmi.com/wp-content/uploads/2025/02/dos-eng.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

.service-card:nth-child(3):hover {
    background-image: url(https://frogmi.com/wp-content/uploads/2025/02/ESGrupo-41954.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;}
    .service-card.service-en:nth-child(3):hover {
        background-image: url(https://frogmi.com/wp-content/uploads/2025/02/ENEnmascarar-grupo-3234.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
.service-card:nth-child(4):hover {
    background-image: url(https://frogmi.com/wp-content/uploads/2025/02/esGrupo-41955.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;}
    .service-card.service-en:nth-child(4):hover {
        background-image: url(https://frogmi.com/wp-content/uploads/2025/02/enGrupo-41960.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
/* Estilos comunes para el hover */
.service-card:hover {
    transform: translateY(-5px);
}

.service-card:hover .card-default {
    opacity: 0;
    visibility: hidden;
}

.service-card:hover .card-hover {
    opacity: 1;
    visibility: visible;
}

.service-card:hover h3,
.service-card:hover p,
.service-card:hover li {
    color: white;
}

/* Estilos específicos del hover para el botón en cada tarjeta */
.service-card:nth-child(1) .learn-more:hover {
    background: white;
    color: #EB4A62;
}

.service-card:nth-child(2) .learn-more:hover {
    background: white;
    color: #BA52B2;
}

.service-card:nth-child(3) .learn-more:hover {
    background: white;
    color: #FBCA00;
}

.service-card:nth-child(4) .learn-more:hover {
    background: white;
    color: #30AABD;
}

/* Responsive */
@media (max-width: 932px) {
    .service-cards-container {
        grid-template-columns: 1fr;
    }
    
    .card-hover {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .card-right {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        padding-top: 1rem;
    }

    .card-1 h3, .card-2 h3, .card-3 h3{
        font-size: 28px!important;
        color:white!important;
    }
    
     .card-1 p, .card-2 p, .card-3 p{
        color:white!important;
        font-size: 15px!important;
        font-weight: 600!important;
    
     }
     .card-4 h3{
    color:#000000!important;
    font-size: 28px!important;
    
     }
    
     .card-4 p{
        color:#000000!important;
        font-size: 15px!important;
        font-weight: 600!important;
         }
    .card-default.card-1{
        background-image: url(https://frogmi.com/wp-content/uploads/2025/02/ES-1Grupo-41903.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    
    }
    .card-default.card-1.card-1-en{
        background-image: url(https://frogmi.com/wp-content/uploads/2025/02/EN-1Grupo-41905.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    
    }
    .card-default.card-2{
        background-image: url(https://frogmi.com/wp-content/uploads/2025/02/ES-2Enmascarar-grupo-3201.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    
    }
    .card-default.card-2.card-2-en{
        background-image: url(https://frogmi.com/wp-content/uploads/2025/02/EN-2Enmascarar-grupo-3212.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    
    }
    .card-default.card-3{
        background-image: url(https://frogmi.com/wp-content/uploads/2025/02/ESEnmascarar-grupo-3218.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    
    }
    .card-default.card-3.card-3-en{
        background-image: url(https://frogmi.com/wp-content/uploads/2025/02/ENEnmascarar-grupo-3220.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    
    }
    .card-default.card-4{
        background-image: url(https://frogmi.com/wp-content/uploads/2025/02/esEnmascarar-grupo-3222.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    
    }
    .card-default.card-4.card-4-en{
        background-image: url(https://frogmi.com/wp-content/uploads/2025/02/enEnmascarar-grupo-3224.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    
    }
    .service-card:nth-child(1):hover {
        background-image: url(https://frogmi.com/wp-content/uploads/2025/02/1-hover-es.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .service-card.service-en:nth-child(1):hover {
        background-image: url(https://frogmi.com/wp-content/uploads/2025/02/1-hover-en.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .service-card:nth-child(2):hover {
        background-image: url(https://frogmi.com/wp-content/uploads/2025/02/2-hover-es.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;}
        .service-card.service-en:nth-child(2):hover {
            background-image: url(https://frogmi.com/wp-content/uploads/2025/02/2-hover-en.jpg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
    .service-card:nth-child(3):hover {
        background-image: url(https://frogmi.com/wp-content/uploads/2025/02/ESEnmascarar-grupo-3288.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;}
        .service-card.service-en:nth-child(3):hover {
            background-image: url(https://frogmi.com/wp-content/uploads/2025/02/EN-1.jpg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
    .service-card:nth-child(4):hover {
        background-image: url(https://frogmi.com/wp-content/uploads/2025/02/esGrupo-41932.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .service-card.service-en:nth-child(4):hover {
        background-image: url(https://frogmi.com/wp-content/uploads/2025/02/enGrupo-41949.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .service-card:hover h3{
        font-size:23px!important;
    }
    .card-default{
        gap:0rem!important;
    }
    .card-default .content-wrapper{
        width: 100%!important;
    }
    .lista li{
        font-size: 15px!important;
    }
}

.card-left h3{
    font-size: 30px!important;
}
.titulo-icono{
    display: flex;
}
.titulo-icono img{
    width: 55px;
    height: auto;
    padding-right: 20px;
}

.lista li{
    font-size: 16px;
}