/* =========================
   TARJETA BASE
========================= */
.paquete-card{
    color:#fff;
    padding:20px;
    border-radius:20px;
    max-width:380px;
    margin:auto;
    text-align:center;
    background:#4B2AA6;
    font-family:Arial;
}

/* =========================
   HEADER
========================= */
.paquete-header{
    background:#FF7700;
    padding:10px 20px;
    border-radius:50px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:22px;
    font-weight:700;
}

.paquete-header img{
    width:32px;
}

/* =========================
   DETALLES
========================= */
.paquete-details{
    background:#5C32B9;
    border-radius:15px;
    padding:20px;
    display:flex;
    justify-content:space-around;
    position:relative;
    margin:15px 0;
}

.paquete-details::after{
    content:"";
    background:url('../uploads/2025/12/4.png') no-repeat center/55px;
    position:absolute;
    top:-25px;
    right:-5px;
    width:60px;
    height:60px;
    opacity:.7;
}

.velocidad-value{
    font-size:28px;
    font-weight:700;
}

.precio-value{
    font-size:34px;
    font-weight:900;
}

/* =========================
   INFO EXTRA
========================= */
.extra-info{
    margin:10px 0;
}

.installation-cost{
    color:#FFD700;
    font-weight:700;
}

.disponibilidad-aviso{
    font-size:13px;
    margin-top:10px;
    border-top:1px dashed rgba(255,255,255,.3);
    padding-top:8px;
}

/* =========================
   USO SUGERIDO
========================= */
.usage-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    max-width:280px;
    margin:15px auto;
}

.usage-grid div{
    display:flex;
    align-items:center;
    gap:8px;
}

/* =========================
   BOTÓN
========================= */
/*.btn-contratar{
    display:inline-block;
    margin-top:15px;
    padding:12px 30px;
    border-radius:50px;
    background:linear-gradient(90deg,#FF7700,#FF9E40,#FF7700);
    color:#fff;
    font-weight:700;
    text-decoration:none;
}*/

.btn-contratar{
    position: relative;
    display: inline-block;
    padding: 12px 25px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    text-decoration: none;
    background: linear-gradient(90deg, #FF7700, #FF9E40, #FF7700);
    background-size: 300% 300%;
    animation: gradientFlow 5s ease infinite;
    overflow: hidden;
}

.btn-contratar::after {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: 0.3s;
}

.btn-contratar:hover {
    padding-right: 40px;
}

.btn-contratar:hover::after {
    opacity: 1;
}

@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ==========================
   TABLETS (768px a 1024px)
========================== */
@media (min-width:768px) and (max-width:1024px){

    .paquete-card{
        max-width:90%;
        padding:25px;
    }

    .paquete-header{
        font-size:24px;
        padding:12px 24px;
    }

    .paquete-header img{
        width:36px;
    }

    .paquete-details{
        padding:25px 15px;
        gap:30px;
    }

    .velocidad-value{
        font-size:32px;
    }

    .precio-value{
        font-size:38px;
    }

    .usage-grid{
        max-width:100%;
        gap:15px;
    }

    .usage-grid div{
        font-size:17px;
    }

    .btn-contratar{
        font-size:19px;
        padding:14px 40px;
    }
}