/* ==========================================================================
   Grupos de paquetes en la home — cada grupo envuelto en un panel con
   degradé suave (color de marca → transparente) que engloba sus paquetes.
   Estética calma/comercial (más tranquila que el showcase de circuitos).
   ========================================================================== */
.packages-section {
    position: relative;
    margin-bottom: 0.5rem;
    padding: clamp(1rem, 2.5vw, 1.75rem) clamp(0.75rem, 2vw, 1.5rem) 0.75rem;
    border-radius: 20px;
    background: linear-gradient(180deg,
        rgba(50, 118, 216, 0.10) 0%,
        rgba(50, 118, 216, 0.03) 38%,
        rgba(50, 118, 216, 0) 75%);
}

/* ----- Header del grupo ----- */
.packages-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.packages-section-title-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.packages-section-title {
    position: relative;
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    font-weight: 800;
    color: #16213e;
    margin: 0;
    padding-left: 14px;
    letter-spacing: -0.3px;
}
.packages-section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 1.1em;
    border-radius: 999px;
    background: linear-gradient(180deg, #3276d8, #1f4e8f);
}

.packages-section-subtitle {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0;
    padding-left: 14px;
}

/* ----- Botón "Ver todos" ----- */
.packages-view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1.5px solid #3276d8;
    color: #3276d8;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 9px 18px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.packages-view-all-btn:hover {
    background: #3276d8;
    color: #fff;
    transform: translateY(-1px);
}
.packages-view-all-btn i { transition: transform .15s ease; }
.packages-view-all-btn:hover i { transform: translateX(3px); }

@media (max-width: 576px) {
    .packages-section-header {
        flex-direction: column;
        align-items: stretch;
    }
    .packages-view-all-btn { justify-content: center; }
}