/* Estilos para el contenedor principal */
    #portada-precios {
        background: rgb(0,126,136);
background: linear-gradient(90deg, rgba(0,126,136,1) 9%, rgba(0,150,163,1) 31%, rgba(0,180,195,1) 58%, rgba(0,205,223,1) 86%, rgba(0,235,255,1) 100%);
        padding: 135px 0px 40px 0px; /* Padding superior e inferior */
        color: #ffffff;
        text-align: center; /* Centra el texto */
        margin-top: 115px; /* Asegura que no haya margen superior adicional */
    }

    #portada-precios h1 {
        font-weight: bold;
        font-size: 2.9rem; /* Tamaño de fuente para el título */
        margin-bottom: 20px; /* Espaciado inferior */
        line-height: 1.2; /* Altura de línea para mejorar la legibilidad */
    }

    .resaltado {
        color: #00545c; /* Color del texto resaltado */
        font-size: 2.9rem;
    }

    #portada-precios h1 span {
        font-size: 2.9rem; /* Tamaño de fuente para el texto */

    }

    #portada-precios span {
        margin-top: 20px;
        font-size: 1.2rem; /* Tamaño de fuente para el texto */
    }

    /* Media Queries para pantallas pequeñas */
    @media (max-width: 768px) {
        #portada-precios h1 {
            font-size: 2rem; /* Tamaño de fuente ajustado */
        }

        #portada-precios span {
            font-size: 1rem; /* Tamaño de fuente ajustado */
        }
    }

    @media (max-width: 576px) {
        #portada-precios {
            padding: 30px 10px; /* Padding ajustado para pantallas más pequeñas */
        }

        #portada-precios h1 {
            font-size: 2.9rem; /* Tamaño de fuente ajustado */
        }

        #portada-precios {
            padding-top: 105px;
        }

        #portada-precios span {
            font-size: 0.9rem; /* Tamaño de fuente ajustado */
        }
    }

    /* Ajustes adicionales para evitar deformaciones */
    .row {
        margin-left: 0; /* Elimina margen izquierdo */
        margin-right: 0; /* Elimina margen derecho */
    }

    .col-md-8, .col-12 {
        padding-left: 15px; /* Ajuste de padding para columnas */
        padding-right: 15px; /* Ajuste de padding para columnas */
    }

    /*Planes css*/
    #planes {
        background-color: #f3f3f3; /* Color de fondo opcional */
        padding: 50px 20px; /* Padding superior e inferior */
    }



    #planes h3 {
        font-weight: bold;
        font-size: 2rem; /* Tamaño de fuente para el título */
        margin-bottom: 20px; /* Espaciado inferior */
    }



/*Botones Mensual, anual, trimestral*/
/*Botones Mensual, anual, trimestral*/
/*Botones Mensual, anual, trimestral*/


    .pricing-button {
        background-color: #00A9B7; /* Color de fondo del botón */
        color: #fff; /* Color del texto del botón */
        border: none; /* Sin borde */
        border-radius: 5px; /* Bordes redondeados */
    }



    .btn-primary {
        background-color: #d69200; /* Color del botón principal */
        border: none; /* Sin borde */
        border-radius: 5px; /* Bordes redondeados */
    }

    .btn-primary:hover {
        background-color: #0056b3; /* Color del botón en hover */
    }

/*Boton Mensual*/

    .btn-mensual {
    background-color: #FFA500;
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border: 2px solid #ffd000;
    }

    .btn-mensual:hover {
        background-color: #ffffff;
        color: #ff8800;
        border: 2px solid #ff8800;
    }




    .btn-contractmensual {
        background-color: #FFA500;
        color: #FFFFFF;
        border: none;
        cursor: pointer;
        font-size: 16px;
        border: 2px solid #ffd000;
        }

        .btn-contractmensual:hover {
            background-color: #ffffff;
            color: #ff8800;
            border: 2px solid #ff8800;
        }


/*Boton Anual*/

    .btn-anual {

    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    background-color: #f3f3f3;
    color: #00A4A7;
    border: 2px solid #0096a3;

    }
    .btn-anual:hover {
        border: 2px solid #0096a3;
        background-color: #0096a3;
        color: #FFFFFF;
    }

/*Boton Trimestral*/

    .btn-trimestral {

        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
        background-color: #0096a3;
        color: #FFFFFF;
        border: 2px solid #0096a3;
    }

    .btn-trimestral:hover {
        border: 2px solid #0096a3;


        background-color: #f3f3f3;
        color: #00A4A7;

    }


/*Botones Mensual, anual, trimestral END*/
/*Botones Mensual, anual, trimestral END*/
/*Botones Mensual, anual, trimestral END*/


    .plan {
        width: 350px; /* Ajusta el valor según tus necesidades */
        margin: 0 10px; /* Espaciado entre los planes */



    }

    .plan .plan-body, .plan .plan-footer {
        width: 100%; /* Asegura que el contenido interno se ajuste al nuevo ancho */
    }

    .plan {
        background-color: #f3f3f3; /* Color de fondo del plan */
        border-radius: 15px; /* Bordes redondeados */
        overflow: hidden; /* Evita el desbordamiento del contenido */
    }

    .plan-body {
        padding: 20px; /* Espaciado interior */
        border-radius: 15px 15px 0 0;
    }

    .plan-footer {
        position: relative;
        bottom:10px;
        background-color: #ffffff;
        border-radius: 15px;
        margin-bottom: 10px;


    }


    /*PLAN BODY COLOR EXCEPT*/

.plan-body.plan-one {
    padding: 20px; /* Espaciado interior */
    border-radius: 15px 15px 0 0;



    background: rgb(0,150,163);
    background: linear-gradient(90deg, rgba(0,150,163,1) 0%, rgba(0,204,222,1) 90%);}


.plan-body.plan-two {

    padding: 20px; /* Espaciado interior */
    border-radius: 15px 15px 0 0;



    background: rgb(0,204,222);
    background: linear-gradient(270deg, rgba(0,204,222,1) 10%, rgba(0,214,232,1) 50%, rgba(0,204,222,1) 90%);

}


.plan-body.plan-three {
    padding: 20px; /* Espaciado interior */
    border-radius: 15px 15px 0 0;




    background: rgb(0,150,163);
    background: linear-gradient(270deg, rgba(0,150,163,1) 0%, rgba(0,204,222,1) 90%);


}


.plan-body .icons-bi {

font-weight: 200;

}


/* Comentado porque no hay span disponible (Temporalmente) */

.plan-one span {

    color:#003035;
}

.plan-two span {

    color:#003035;
}



    .text-center {
        text-align: center; /* Centra el texto */
    }

    @media (max-width: 768px) {
        #planes h3 {
            font-size: 1.5rem; /* Tamaño de fuente ajustado para pantallas pequeñas */
        }

        .plan-body h3 {
            font-size: 1.5rem; /* Tamaño de fuente ajustado */
        }

        .btn-primary {
            font-size: 0.9rem; /* Tamaño de fuente ajustado */
        }
    }