/* ========================================================
   SECCIÓN PLANES GMASTER APP (Rediseño Compacto)
   ======================================================== */

.free_app_section .section_title h2 {
    color: #00c0d3;
}

/* Override para "Más agilidad, más control..." */
.free_app_section .section_title p.text-center {
    color: #009dae !important;
    font-weight: 700 !important;
}

/* Override para "Activa la versión móvil..." y quitar cursiva */
.free_app_section .row .text-center>p {
    color: #009dae !important;
    font-style: normal !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    /* Asegurar opacidad total */
}

/* Contenedor de tarjetas lado a lado */
.planes-cards-container {
    display: flex;
    flex-direction: row;
    /* Lado a lado */
    justify-content: center;
    /* Centradas */
    gap: 20px;
    /* Espacio entre ellas */
    margin-top: 40px;
    flex-wrap: wrap;
    /* Permitir wrap en muy pequeño */
}

/* Ajuste Flip Card Container */
.flip-card {
    background-color: transparent;
    width: 260px;
    /* Un poco mas ancho */
    height: 380px;
    /* Altura aumentada significativamente */
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 15px;
}

/* Ajuste contenido interno para centrado */
.plan-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Usar espacio disponible */
    height: 100%;
    padding: 20px 15px;
}

/* Ajuste específico para la parte trasera: quitar espacio en blanco central */
.flip-card-back .plan-card {
    justify-content: flex-start;
    gap: 10px;
}

/* Distribución equitativa de los items de la lista */
.flip-card-back .plan-card .plan-features {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.flip-card-back .plan-card .plan-features ul {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-bottom: 10px;
}

.plan-card .plan-header h3 {
    font-size: 20px;
    margin-bottom: 5px;
}

.plan-card.plan-free .plan-subtitle {
    margin-top: 50px;
}

.plan-card .plan-subtitle {
    font-size: 11px;
    line-height: 1.3;
    margin-bottom: 10px;
}

.plan-card .plan-icon {
    margin: 10px 0;
}

.plan-card .plan-icon i {
    font-size: 40px !important;
}

/* Texto específico para el plan premium (evitar overflow) */
.plan-premium p.text-center {
    font-size: 11px !important;
    line-height: 1.3;
    padding: 0;
    margin-bottom: 5px;
}

.plan-card .plan-cta p {
    font-size: 11px;
    margin-bottom: 0;
}

.plan-card .plan-features h4 {
    font-size: 14px;
    margin-bottom: 10px;
}

.plan-card .plan-features ul li {
    font-size: 11px;
    padding: 2px 0;
}

.plan-card .plan-features ul li i {
    font-size: 12px;
}

/* Responsividad */
@media (max-width: 768px) {
    .planes-cards-container {
        gap: 15px;
    }

    .flip-card {
        width: 240px;
        height: 350px;
    }

    .plan-card .plan-icon i {
        font-size: 35px !important;
    }
}

@media (max-width: 576px) {
    .planes-cards-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .flip-card {
        width: 100%;
        max-width: 280px;
        height: 380px;
    }

    .plan-card .plan-header h3 {
        font-size: 18px;
    }

    .plan-card .plan-subtitle {
        font-size: 10px;
    }

    .plan-card .plan-cta p {
        font-size: 10px;
    }
}

@media (max-width: 400px) {
    .flip-card {
        max-width: 260px;
        height: 360px;
    }

    .plan-card {
        padding: 15px 12px;
    }

    .plan-card .plan-header h3 {
        font-size: 16px;
    }

    .plan-card .plan-subtitle {
        font-size: 9px;
    }

    .plan-card .plan-icon {
        margin: 8px 0;
    }

    .plan-card .plan-icon i {
        font-size: 30px !important;
    }

    .plan-card .plan-features h4 {
        font-size: 13px;
    }

    .plan-card .plan-features ul li {
        font-size: 10px;
        padding: 1px 0;
    }

    .plan-card .plan-cta p {
        font-size: 9px;
    }
}

/* ========================================================
   ESPACIADO PARA FREE_IMG EN GMASTER
   ======================================================== */

/* Espacio superior para free_img cuando está debajo de flip-cards en móviles */
.free_app_section .free_img {
    padding-top: 0;
}

/* Responsive adjustments para free_img */
@media (max-width: 991px) {
    .free_app_section .free_img {
        padding-top: 30px;
    }
}

@media (max-width: 767px) {
    .free_app_section .free_img {
        padding-top: 40px;
    }
}

@media (max-width: 575px) {
    .free_app_section .free_img {
        padding-top: 30px;
    }

    .free_app_section .free_img img {
        max-height: 400px !important;
    }

    .free_app_section .free_img .mobile_mockup {
        max-height: 350px !important;
        margin-top: 20px !important;
    }
}

@media (max-width: 400px) {
    .free_app_section .free_img {
        padding-top: 20px;
    }

    .free_app_section .free_img img {
        max-height: 350px !important;
    }

    .free_app_section .free_img .mobile_mockup {
        max-height: 300px !important;
        margin-top: 15px !important;
    }
}

/* ========================================================
   ESTILOS PARA ANIMACIÓN DE VOLTEO (FLIP)
   Solo funcionalidad de volteo, sin modificar diseño visual
   ======================================================== */

/* Contenedor de la tarjeta flip - perspectiva para efecto 3D */
.flip-card {
    perspective: 1000px;
}

/* Contenedor interno que realiza el giro */
.flip-card-inner {
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Al hacer hover, gira la tarjeta */
/* CLASE FLIPPED - ACTIVA EL GIRO (IMPORTANTE: MANDA SOBRE TODO) */
.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg) !important;
}

/* Solo permitir hover en dispositivos que soporten hover real (Desktop) */
@media (hover: hover) {
    .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
    }
}

/* Posicionamiento de las caras */
.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    top: 0;
    left: 0;
}

/* Vista trasera - rotada 180 grados por defecto */
.flip-card-back {
    transform: rotateY(180deg);
}