/* ========================================================= */
/* SUSCRIPCIÓN - HUMIDI-TEC                                 */
/* ========================================================= */

.subscription-page {
    width: 100%;
    max-width: 1120px;

    margin: 0 auto;

    color:
        var(--text-primary);
}


/* ========================================================= */
/* ENCABEZADO                                                */
/* ========================================================= */

.subscription-header {
    margin-bottom: 20px;
}

.subscription-label {
    display: block;

    margin-bottom: 4px;

    color:
        var(--green-700);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.15px;
}

.subscription-header h1 {
    margin: 0;

    color:
        var(--green-950);

    font-size: 30px;
    font-weight: 900;
    line-height: 1.15;
}

.subscription-header p {
    max-width: 720px;

    margin:
        7px
        0
        0;

    color:
        var(--text-primary);

    font-size: 14px;
    font-weight: 650;
    line-height: 1.5;

    opacity: .82;
}


/* ========================================================= */
/* PLAN ACTUAL                                               */
/* ========================================================= */

.current-plan-card {
    min-height: 118px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 22px;

    padding:
        18px
        20px;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-left:
        5px solid var(--green-600);

    border-radius: 13px;

    box-shadow:
        var(--shadow-small);
}

.current-plan-main {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 14px;
}

.current-plan-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color:
        #ffffff;

    background:
        var(--green-700);

    border-radius: 11px;
}

.current-plan-icon svg {
    width: 23px;
    height: 23px;
}

.current-plan-copy {
    min-width: 0;
}

.current-plan-copy > span {
    display: block;

    margin-bottom: 3px;

    color:
        var(--green-700);

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

.current-plan-title {
    display: flex;
    align-items: center;

    gap: 9px;
}

.current-plan-title h2 {
    margin: 0;

    color:
        var(--green-950);

    font-size: 21px;
    font-weight: 900;
}

.current-plan-copy p {
    margin:
        5px
        0
        0;

    color:
        var(--text-primary);

    font-size: 12px;
    font-weight: 650;
    line-height: 1.45;

    opacity: .78;
}


/* ========================================================= */
/* ESTADO                                                    */
/* ========================================================= */

.subscription-active {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding:
        5px
        9px;

    color:
        var(--green-800);

    background:
        var(--green-100);

    border:
        1px solid var(--green-400);

    border-radius: 999px;

    font-size: 9px;
    font-weight: 850;
}

.subscription-active > span {
    width: 7px;
    height: 7px;

    background:
        var(--green-600);

    border-radius: 50%;
}


/* ========================================================= */
/* BOTONES                                                   */
/* ========================================================= */

.subscription-primary-button,
.subscription-secondary-button,
.plan-button {
    min-height: 42px;

    padding:
        8px
        15px;

    border-radius: 9px;

    font: inherit;
    font-size: 12px;
    font-weight: 850;

    cursor: pointer;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        transform .15s ease,
        box-shadow .15s ease;
}

.subscription-secondary-button {
    flex-shrink: 0;

    color:
        var(--green-800);

    background:
        var(--surface);

    border:
        1px solid var(--green-400);
}

.subscription-secondary-button:hover {
    background:
        var(--green-50);

    border-color:
        var(--green-600);
}

.subscription-primary-button {
    color:
        #ffffff;

    background:
        var(--green-700);

    border:
        1px solid var(--green-800);
}

.subscription-primary-button:hover {
    background:
        var(--green-800);
}


/* ========================================================= */
/* SECCIONES                                                 */
/* ========================================================= */

.subscription-section {
    margin-top: 28px;
}

.subscription-section-header {
    margin-bottom: 13px;
}

.subscription-section-header > span {
    display: block;

    margin-bottom: 4px;

    color:
        var(--green-700);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}

.subscription-section-header h2 {
    margin: 0;

    color:
        var(--green-950);

    font-size: 22px;
    font-weight: 900;
}

.subscription-section-header p {
    max-width: 720px;

    margin:
        5px
        0
        0;

    color:
        var(--text-primary);

    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;

    opacity: .80;
}


/* ========================================================= */
/* PLANES                                                    */
/* ========================================================= */

.plans-grid {
    display: grid;

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

    gap: 16px;

    align-items: stretch;
}

.plan-card {
    position: relative;

    min-width: 0;

    display: flex;
    flex-direction: column;

    padding:
        20px;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius: 14px;

    box-shadow:
        var(--shadow-small);
}

.plan-card.premium-plan {
    border:
        2px solid var(--green-600);

    box-shadow:
        var(--shadow-medium);
}


/* ========================================================= */
/* PREMIUM DESTACADO                                         */
/* ========================================================= */

.premium-highlight {
    position: absolute;

    top: -11px;
    right: 18px;

    padding:
        5px
        10px;

    color:
        #ffffff;

    background:
        var(--green-700);

    border-radius:
        999px;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .6px;
}


/* ========================================================= */
/* ENCABEZADO PLAN                                           */
/* ========================================================= */

.plan-card-header {
    min-height: 105px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}

.plan-type {
    display: block;

    margin-bottom: 4px;

    color:
        var(--green-700);

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

.plan-card h3 {
    margin: 0;

    color:
        var(--green-950);

    font-size: 23px;
    font-weight: 900;
}

.plan-card-header p {
    max-width: 390px;

    margin:
        6px
        0
        0;

    color:
        var(--text-primary);

    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;

    opacity: .78;
}


/* ========================================================= */
/* PLAN ACTUAL BADGE                                         */
/* ========================================================= */

.current-plan-badge {
    flex-shrink: 0;

    padding:
        5px
        8px;

    color:
        var(--green-800);

    background:
        var(--green-100);

    border:
        1px solid var(--green-400);

    border-radius: 999px;

    font-size: 9px;
    font-weight: 850;
}


/* ========================================================= */
/* PRECIO                                                    */
/* ========================================================= */

.plan-price {
    min-height: 72px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    margin-top: 5px;
}

.plan-price > strong {
    color:
        var(--green-950);

    font-size: 29px;
    font-weight: 900;
    line-height: 1;
}

.plan-price > span {
    margin-top: 6px;

    color:
        var(--text-secondary);

    font-size: 10px;
    font-weight: 700;
}

.premium-price > div {
    display: flex;
    align-items: flex-end;

    gap: 3px;
}

.premium-price strong {
    color:
        var(--green-950);

    font-size: 36px;
    font-weight: 900;
    line-height: .95;
}

.currency {
    margin-bottom: 3px;

    color:
        var(--green-700);

    font-size: 18px;
    font-weight: 900;
}

.currency-code {
    margin:
        0
        0
        3px
        4px;

    color:
        var(--text-secondary);

    font-size: 10px;
    font-weight: 850;
}


/* ========================================================= */
/* DIVISOR                                                   */
/* ========================================================= */

.plan-divider {
    width: 100%;
    height: 1px;

    margin:
        15px
        0;

    background:
        var(--border);
}


/* ========================================================= */
/* FUNCIONES                                                 */
/* ========================================================= */

.plan-features {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 11px;

    margin-bottom: 20px;
}

.plan-feature {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    color:
        var(--text-primary);

    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
}

.feature-check {
    width: 20px;
    height: 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex:
        0
        0
        20px;

    color:
        var(--green-800);

    background:
        var(--green-100);

    border-radius: 50%;

    font-size: 11px;
    font-weight: 900;
}

.premium-feature {
    color:
        var(--green-950);

    font-weight: 750;
}


/* ========================================================= */
/* BOTONES DE PLAN                                           */
/* ========================================================= */

.plan-button {
    width: 100%;
}

.plan-button.current {
    color:
        var(--text-secondary);

    background:
        var(--green-50);

    border:
        1px solid var(--border);

    cursor: default;
}

.plan-button.premium {
    color:
        #ffffff;

    background:
        var(--green-700);

    border:
        1px solid var(--green-800);

    box-shadow:
        0 5px 13px rgba(8, 116, 67, .13);
}

.plan-button.premium:hover {
    background:
        var(--green-800);

    transform:
        translateY(-1px);
}


/* ========================================================= */
/* INFORMACIÓN                                               */
/* ========================================================= */

.subscription-information {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin-top: 20px;

    padding:
        15px
        17px;

    background:
        var(--blue-50);

    border:
        1px solid var(--blue-100);

    border-radius: 11px;
}

.subscription-information-icon {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color:
        var(--blue-600);

    background:
        #ffffff;

    border-radius: 9px;
}

.subscription-information-icon svg {
    width: 18px;
    height: 18px;
}

.subscription-information strong {
    color:
        var(--green-950);

    font-size: 12px;
    font-weight: 900;
}

.subscription-information p {
    margin:
        4px
        0
        0;

    color:
        var(--text-primary);

    font-size: 11px;
    font-weight: 650;
    line-height: 1.5;

    opacity: .82;
}


/* ========================================================= */
/* MODAL                                                     */
/* ========================================================= */

.subscription-modal {
    position: fixed;

    inset: 0;

    z-index: 3000;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;
}

.subscription-modal.visible {
    display: flex;
}

.subscription-modal-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(3, 35, 22, .58);

    backdrop-filter:
        blur(3px);
}

.subscription-modal-dialog {
    position: relative;

    z-index: 1;

    width: 100%;
    max-width: 420px;

    padding:
        28px
        25px
        24px;

    text-align: center;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius: 16px;

    box-shadow:
        0 24px 60px rgba(3, 46, 27, .24);
}

.subscription-modal-close {
    position: absolute;

    top: 11px;
    right: 13px;

    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    color:
        var(--text-secondary);

    background:
        transparent;

    border: none;
    border-radius: 8px;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;
}

.subscription-modal-close:hover {
    background:
        var(--green-50);
}

.subscription-modal-icon {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin:
        0
        auto
        13px;

    color:
        #ffffff;

    background:
        var(--green-700);

    border-radius: 14px;
}

.subscription-modal-icon svg {
    width: 25px;
    height: 25px;
}

.subscription-modal-label {
    color:
        var(--green-700);

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

.subscription-modal-dialog h2 {
    margin:
        4px
        0
        6px;

    color:
        var(--green-950);

    font-size: 23px;
    font-weight: 900;
}

.subscription-modal-dialog > p {
    margin:
        0
        auto;

    max-width: 330px;

    color:
        var(--text-primary);

    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;

    opacity: .80;
}

.subscription-modal-price {
    display: flex;
    align-items: flex-end;
    justify-content: center;

    gap: 3px;

    margin:
        20px
        0;
}

.subscription-modal-price > span {
    margin-bottom: 4px;

    color:
        var(--green-700);

    font-size: 20px;
    font-weight: 900;
}

.subscription-modal-price strong {
    color:
        var(--green-950);

    font-size: 43px;
    font-weight: 900;
    line-height: .9;
}

.subscription-modal-price small {
    margin-bottom: 4px;

    color:
        var(--text-secondary);

    font-size: 10px;
    font-weight: 850;
}

.subscription-modal-note {
    margin-bottom: 18px;

    padding:
        10px
        12px;

    color:
        var(--text-primary);

    background:
        var(--green-50);

    border:
        1px solid var(--border);

    border-radius: 9px;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.45;
}


/* ========================================================= */
/* ACCESIBILIDAD                                             */
/* ========================================================= */

.subscription-page :focus-visible {
    outline:
        3px solid var(--blue-600);

    outline-offset:
        3px;
}


/* ========================================================= */
/* TABLET                                                    */
/* ========================================================= */

@media (max-width: 820px) {

    .plans-grid {
        grid-template-columns: 1fr;
    }

}


/* ========================================================= */
/* MÓVIL                                                     */
/* ========================================================= */

@media (max-width: 650px) {

    .subscription-header h1 {
        font-size: 27px;
    }

    .current-plan-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .current-plan-title {
        align-items: flex-start;
        flex-direction: column;

        gap: 6px;
    }

    .subscription-secondary-button {
        width: 100%;
    }

    .plan-card {
        padding:
            18px
            16px;
    }

    .plan-card-header {
        min-height: auto;

        flex-direction: column;
    }

    .subscription-information {
        align-items: flex-start;
    }

}