.plans-section {
    padding: 20px;
    text-align: center;
}

.titu{   
font-family: Montserrat, sans-serif;
    font-size: 35px;
    background: #84c474;
    color: #fff;
    display: inline-block;
    border-radius: 5px;
    text-align: center;
    padding: 22px;
    margin-right: 5px;
    font-weight: 300;
    font-style: italic;
}
.plans-section h2 {
    font-family: "Open Sans", sans-serif;
    font-weight: 700; /* Bold weight */
    color: #fff;
    margin-bottom: 20px;
    font-size: 36px;
}


/* Estilos para los planes */
/* Ajustes en la sección de planes */
.plans {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* Estilo para cada plan */
.plan {
    background: #ffffff; /* Fondo blanco sin degradado */
    padding: 20px;
    border-radius: 10px;
    border: 2px solid #ddd; /* Borde de color gris claro */
    text-align: center;
    flex: 1 1 calc(33.333% - 20px); /* Ajuste para 3 elementos por fila */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    border-top: 5px solid #234380; /* Borde superior del modal en azul */
}

/* Estilo adicional para los planes en dispositivos muy pequeños */
@media (max-width: 768px) {
    .plan {
        flex: 1 1 calc(50% - 20px); /* Ajuste para 2 elementos por fila en pantallas medianas */
    }
}

@media (max-width: 480px) {
    .plan {
        flex: 1 1 100%; /* Ajuste para 1 elemento por fila en pantallas pequeñas */
    }
}
/* Borde superior del plan */
.plan::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    border-radius: 10px 10px 0 0;
}

/* Íconos del Plan */
.plan i {
    font-size: 40px; /* Ajusta el tamaño del ícono a 40px */
    margin-bottom: 10px;
}

/* Encabezado del Plan */
.plan-header {
    margin-bottom: 15px;
}

.plan-header_text_h3 {
    font-family: "Open Sans", sans-serif;
    font-weight: 700; /* Bold weight */
    font-size: 25px;
    color: #333; /* Color del texto del título */
 
}

.plan-header_text_what {
    font-family: "Open Sans", sans-serif;
    font-weight: 700; /* Bold weight */
    margin: 0;
    font-size: 17px;
    color: #fff; /* Color del texto del título */
    font-weight: 300; /* Light weight */
    text-align: left;
}
/* Valor del Plan */
.plan-header .price {
    font-size: 25px; /* Tamaño del precio ajustado */
    margin: 10px 0;
    font-family: "Open Sans", sans-serif;
    font-weight: 700; /* Bold weight */
    display: block; /* Asegura que el texto del precio se muestre en una nueva línea */
    position: relative; /* Permite posicionar el pseudo-elemento */
    padding: 5px 0; /* Padding adicional para el precio */
}

/* Estilo del precio con un efecto de sombra */
.plan-header .price::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(to right, #25D366, rgba(37, 211, 102, 0)); /* Línea verde de WhatsApp que se desvanece */
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra sutil para el efecto de profundidad */
}

/* Detalles del Plan */
.plan-details {
    margin: 20px 0;
    text-align: left;
    border-top: 1px solid #ddd;
    padding-top: 10px;
}

.plan-details p {
    margin: 10px 0;
    font-family: "Open Sans", sans-serif;
    font-weight: 700; /* Bold weight */
    font-size: 16px;
}

/* Velocidad del Plan */
.plan-details .speed {
    font-size: 25px; /* Aumenta el tamaño del texto de velocidad */
    border-left: 10px solid #25D366; /* Línea de separación a la izquierda en verde WhatsApp */
    padding-left: 15px; /* Aumenta el padding a la izquierda */
    margin-bottom: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil para destacar */
    text-align: center;
}

.tex_5g {
    font-size: 20px; /* Aumenta el tamaño del texto de velocidad */
    margin-bottom: 15px;
    border-radius: 5px;
    text-align: center;
}

/* Estilo para el botón de WhatsApp */
.whatsapp-button {
    background-color:#04aa6d; /* Color sólido de WhatsApp */
    border: none;
    color: white;
    padding: 12px 25px; /* Aumenta el padding para un botón más grande */
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;

}

/* Alineación y estilo del ícono dentro del botón */
.whatsapp-button i {
    margin-right: 12px; /* Espacio entre el ícono y el texto */
    font-size: 24px; /* Tamaño del ícono aumentado */
    color: white; /* Color del ícono de WhatsApp */
}

/* Efecto hover para el botón de WhatsApp */
.whatsapp-button:hover {
    background-color: #1ebe55; /* Color verde más oscuro al pasar el ratón */
    transform: scale(1.05); /* Efecto de agrandar al pasar el cursor */
}

/* Efecto hover para los planes */
.plan:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Colores de los íconos de los planes */
.plan i.fa-globe {
    color: #039ed6; /* Azul para el ícono del globo */
}

.plan i.fa-tv {
    color: #1584b4; /* Azul para el ícono de TV */
}

.plan i.fa-rocket {
    color: #b5c53f; /* Amarillo para el ícono de cohete */
}

.plan i.fa-star {
    color: #e74c3c; /* Rojo para el ícono de estrella */
}

.plan i.fa-wifi {
    color: #7ebc12; /* Azul para el ícono de WiFi */
    font-size: 30px; /* Tamaño del ícono aumentado */
}

.plan i.fa-desktop {
    color: #039ed6; /* Azul para el ícono de WiFi */
    font-size: 30px; /* Tamaño del ícono aumentado */
}