/* ==========================================================
   PAQUETES (sección informativa)
========================================================== */

#paquetes {

    padding: var(--space-xl) 0;

    background-color: var(--color-light);

}

#paquetes .container {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: var(--space-md);

}

#paquetes h2 {

    max-width: 700px;

    color: var(--color-primary);

    font-size: 2.5rem;

    line-height: 1.2;

    text-align: center;

}

#paquetes .section-description {

    max-width: 700px;

    text-align: center;

    line-height: 1.8;

}

.packages-grid {

    width: 100%;

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: var(--space-md);

}

.package-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: .35rem;

    padding: 1.8rem 1.5rem;

    border-radius: var(--radius-md);

    background-color: var(--color-white);

    box-shadow: var(--shadow-md);

    text-align: center;

    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity .7s ease,
        transform .7s ease,
        box-shadow .3s ease;

}

.package-card.is-visible {

    opacity: 1;

    transform: translateY(0);

}

.package-card.is-visible:hover {

    transform: translateY(-6px);

    box-shadow: var(--shadow-lg);

}

.package-card h3 {

    color: var(--color-primary);

    font-size: 1.2rem;

}

.package-price {

    margin: 0;

    color: var(--color-ink);

    font-size: 2.4rem;

    font-weight: 700;

    line-height: 1.15;

}

.package-per {

    margin: 0;

    font-size: .95rem;

}

.package-card--featured {

    background-color: #566a51;

    color: #ffffff;

}

.package-card--featured h3,
.package-card--featured .package-price {

    color: #ffffff;

}

.packages-notes {

    width: 100%;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: var(--space-md);

}

.package-note {

    display: flex;

    flex-direction: column;

    gap: .4rem;

    padding: 1.5rem;

    border-radius: var(--radius-md);

    background-color: var(--color-white);

    box-shadow: var(--shadow-sm);

}

.package-note h3 {

    color: var(--color-primary);

    font-size: 1.2rem;

}

.package-note p {

    margin: 0;

}

.package-note small {

    font-size: .88rem;

}

.packages-footnote {

    max-width: 640px;

    text-align: center;

    font-size: .95rem;

}

@media (max-width: 992px) {

    #paquetes h2 {
        font-size: 2.2rem;
    }

    .packages-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }

}

@media (max-width: 768px) {

    #paquetes {
        padding: var(--space-lg) 0;
    }

    #paquetes h2 {
        font-size: 2rem;
    }

    .packages-notes {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

}

@media (max-width: 480px) {

    #paquetes h2 {
        font-size: 1.7rem;
    }

    .packages-grid {
        grid-template-columns: minmax(0, 1fr);
    }

}

@media (max-width: 400px) {

    #paquetes h2 {
        font-size: 1.6rem;
    }

}

@media (prefers-reduced-motion: reduce) {

    .package-card {
        opacity: 1;
        transform: none;
        transition: none;
    }

}