@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@400;500;600;700;800&display=swap');


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --kuska-red: #ED484A;
    --kuska-red-dark: #d93c3e;

    --kuska-white: #ffffff;
    --kuska-bg: #FCF0D9;

    --kuska-black: #111111;
    --kuska-gray: #666666;

    --border: rgba(17,17,17,.12);

    --header-height: 78px;

}


/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family: 'Parkinsans', sans-serif;

    background: var(--kuska-bg);

    color: var(--kuska-black);

    overflow-x: hidden;

}


button,
input {

    font-family: inherit;

}


button {

    border: none;

    cursor: pointer;

}


a {

    text-decoration: none;

    color: inherit;

}


img {

    display: block;

    max-width: 100%;

}


/* =========================================================
   HEADER
========================================================= */

.payment-header {

    width: 100%;

    height: var(--header-height);

    padding: 0 7%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: rgba(255,255,255,.93);

    border-bottom: 1px solid rgba(0,0,0,.07);

    position: relative;

    z-index: 10;

}


.payment-logo img {

    width: 140px;

    height: auto;

}


.payment-secure {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #555;

    font-size: 13px;

    font-weight: 600;

}


.secure-icon {

    width: 25px;

    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(69,165,90,.12);

    color: #45A55A;

    font-size: 12px;

}


/* =========================================================
   PAGE
========================================================= */

.payment-page {

    width: 100%;

    padding: 65px 5% 90px;

}


.payment-wrapper {

    width: 100%;

    max-width: 1180px;

    margin: 0 auto;

}


/* =========================================================
   HEADING
========================================================= */

.payment-heading {

    margin-bottom: 45px;

}


.payment-back {

    display: inline-flex;

    align-items: center;

    margin-bottom: 28px;

    color: #555;

    font-size: 13px;

    font-weight: 600;

    transition: color .2s ease;

}


.payment-back:hover {

    color: var(--kuska-red);

}


.payment-eyebrow {

    display: block;

    margin-bottom: 8px;

    color: var(--kuska-red);

    font-size: 14px;

    font-weight: 700;

}


.payment-heading h1 {

    font-size: clamp(42px,5vw,64px);

    line-height: .98;

    letter-spacing: -2px;

    font-weight: 800;

}


.payment-heading h1 strong {

    display: block;

    color: var(--kuska-red);

}


.payment-heading p {

    max-width: 520px;

    margin-top: 18px;

    color: #666;

    font-size: 15px;

    line-height: 1.5;

}


/* =========================================================
   LAYOUT
========================================================= */

.payment-layout {

    display: grid;

    grid-template-columns:
        minmax(0,1.5fr)
        minmax(320px,.85fr);

    gap: 30px;

    align-items: start;

}


/* =========================================================
   FORM CARD
========================================================= */

.payment-form-card {

    padding: 35px;

    background: white;

    border-radius: 18px;

    box-shadow:
        0 15px 50px rgba(0,0,0,.06);

}


/* =========================================================
   STEPS
========================================================= */

.payment-step {

    display: flex;

    gap: 18px;

}


.step-number {

    width: 32px;
    height: 32px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--kuska-red);

    color: white;

    font-size: 13px;

    font-weight: 700;

}


.step-content {

    flex: 1;

    min-width: 0;

}


.payment-label {

    display: block;

    margin-bottom: 7px;

    color: var(--kuska-red);

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .5px;

}


.step-content h2 {

    margin-bottom: 24px;

    font-size: 25px;

    line-height: 1.1;

    font-weight: 800;

}


/* =========================================================
   DIVIDER
========================================================= */

.payment-section-divider {

    width: calc(100% - 50px);

    height: 1px;

    margin: 35px 0 35px 50px;

    background: rgba(0,0,0,.08);

}


/* =========================================================
   COUNTRY
========================================================= */

.country-selector {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

}


.country-option {

    position: relative;

    min-height: 86px;

    padding: 15px;

    display: flex;

    align-items: center;

    gap: 13px;

    text-align: left;

    background: white;

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

    border-radius: 10px;

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;

}


.country-option:hover {

    transform: translateY(-2px);

    border-color: rgba(237,72,74,.4);

}


.country-option.active {

    background: rgba(237,72,74,.05);

    border-color: var(--kuska-red);

}


.country-flag {

    font-size: 29px;

    line-height: 1;

}


.country-info {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.country-info strong {

    font-size: 13px;

}


.country-info small {

    color: #777;

    font-size: 9px;

}


.country-check {

    position: absolute;

    top: 9px;

    right: 9px;

    width: 18px;
    height: 18px;

    display: none;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--kuska-red);

    color: white;

    font-size: 9px;

}


.country-option.active .country-check {

    display: flex;

}


/* Países sin pasarela todavía ("Próximamente"). */
.country-option:disabled {

    opacity: .5;

    cursor: not-allowed;

}


.country-option:disabled:hover {

    transform: none;

    border-color: var(--border);

}


.country-nota {

    margin-top: 10px;

    color: #777;

    font-size: 12px;

    line-height: 1.5;

}


/* =========================================================
   PAYMENT METHODS
========================================================= */

.country-methods {

    display: none;

    flex-direction: column;

    gap: 9px;

    margin-bottom: 20px;

}


.country-methods.active {

    display: flex;

}


.payment-method {

    position: relative;

    width: 100%;

    min-height: 72px;

    padding: 13px 15px;

    display: flex;

    align-items: center;

    gap: 13px;

    background: white;

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

    border-radius: 10px;

    text-align: left;

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;

}


.payment-method:hover {

    transform: translateX(3px);

    border-color: rgba(237,72,74,.4);

}


.payment-method.active {

    background: rgba(237,72,74,.05);

    border-color: var(--kuska-red);

}


.method-logo {

    width: 43px;
    height: 43px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    font-size: 13px;

    font-weight: 800;

}


.union-logo {

    background: #e8eef9;

    color: #173d75;

}


.yape-logo {

    background: #eee4ff;

    color: #7128c8;

    font-size: 21px;

}


.enlace-logo {

    background: #e9f7ef;

    color: #25804a;

}


.uniq-logo {

    background: #f0e8ff;

    color: #6f35c5;

}


.mp-logo {

    background: #e4f5ff;

    color: #1686bd;

}


.card-logo {

    background: #f1f1f1;

    font-size: 18px;

}


.method-info {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.method-info strong {

    font-size: 13px;

}


.method-info small {

    color: #777;

    font-size: 9px;

}


.method-arrow {

    margin-left: auto;

    color: #aaa;

    font-size: 20px;

    transition:
        color .2s ease,
        transform .2s ease;

}


.payment-method.active .method-arrow {

    color: var(--kuska-red);

    transform: translateX(3px);

}


/* =========================================================
   METHOD CONTENT
========================================================= */

.payment-method-content-wrapper {

    margin-top: 8px;

}


.payment-method-content {

    display: none;

}


.payment-method-content.active {

    display: block;

}


/* =========================================================
   ALTERNATIVE PAYMENT
========================================================= */

.alternative-payment {

    padding: 30px 20px;

    text-align: center;

    border: 1px dashed rgba(0,0,0,.15);

    border-radius: 12px;

    background: #fafafa;

}


.alternative-icon {

    width: 55px;
    height: 55px;

    margin: 0 auto 17px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(237,72,74,.1);

    color: var(--kuska-red);

    font-size: 16px;

    font-weight: 800;

}


.alternative-payment h3 {

    margin-bottom: 8px;

    font-size: 17px;

}


.alternative-payment p {

    max-width: 430px;

    margin: 0 auto;

    color: #777;

    font-size: 12px;

    line-height: 1.5;

}


.alternative-note {

    max-width: 420px;

    margin: 18px auto 0;

    padding: 12px;

    border-radius: 7px;

    background: #fff4f4;

    color: #777;

    font-size: 10px;

}


/* =========================================================
   CARD FORM
========================================================= */

.card-form {

    padding-top: 5px;

}


.form-group {

    width: 100%;

    margin-bottom: 18px;

}


.form-group label {

    display: block;

    margin-bottom: 8px;

    font-size: 12px;

    font-weight: 700;

}


.form-group input {

    width: 100%;

    height: 48px;

    padding: 0 15px;

    background: #fafafa;

    border: 1px solid rgba(0,0,0,.13);

    border-radius: 7px;

    outline: none;

    color: var(--kuska-black);

    font-size: 13px;

    transition:
        border-color .2s ease,
        background .2s ease;

}


.form-group input::placeholder {

    color: #aaa;

}


.form-group input:focus {

    background: white;

    border-color: var(--kuska-red);

}


.input-icon {

    position: relative;

}


.input-icon input {

    padding-right: 45px;

}


.input-icon span {

    position: absolute;

    top: 50%;

    right: 15px;

    transform: translateY(-50%);

    color: #aaa;

}


.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

}


.save-card {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #666;

    font-size: 10px;

    cursor: pointer;

}


.save-card input {

    accent-color: var(--kuska-red);

}


/* =========================================================
   SECURITY
========================================================= */

.payment-security {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 30px;

    padding-top: 22px;

    border-top: 1px solid rgba(0,0,0,.08);

}


.security-icon {

    width: 32px;
    height: 32px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #e7f7ea;

    color: #45A55A;

    font-size: 13px;

}


.payment-security strong {

    display: block;

    margin-bottom: 3px;

    font-size: 11px;

}


.payment-security p {

    color: #777;

    font-size: 10px;

}


/* =========================================================
   SUMMARY
========================================================= */

.payment-summary {

    position: sticky;

    top: 105px;

    overflow: hidden;

    padding: 32px;

    background: #111;

    border-radius: 18px;

    color: white;

    box-shadow:
        0 20px 50px rgba(0,0,0,.12);

}


.summary-pattern {

    position: absolute;

    top: -40px;

    right: -40px;

    width: 140px;
    height: 140px;

    border-radius: 50%;

    background:
        repeating-radial-gradient(
            circle,
            transparent 0 8px,
            rgba(255,255,255,.05) 9px 10px
        );

}


.summary-label {

    position: relative;

    display: block;

    margin-bottom: 25px;

    color: #aaa;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;

    font-weight: 700;

}


.summary-product {

    position: relative;

    display: flex;

    align-items: center;

    gap: 15px;

}


.summary-logo {

    width: 60px;
    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: white;

}


.summary-logo img {

    width: 45px;

}


.summary-product h3 {

    margin-bottom: 4px;

    font-size: 18px;

}


.summary-product p {

    color: #aaa;

    font-size: 11px;

}


/* PLAN DINÁMICO */

.checkout-plan-name {

    display: block;

    color: #aaa;

    font-size: 11px;

}


.checkout-plan-period {

    display: block;

    margin-top: 3px;

    color: #777;

    font-size: 9px;

}


.summary-divider {

    width: 100%;

    height: 1px;

    margin: 25px 0;

    background: rgba(255,255,255,.12);

}


.summary-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 15px;

    color: #aaa;

    font-size: 12px;

}


.summary-row strong {

    color: white;

    font-size: 13px;

}


.summary-row .discount {

    color: #78c987;

}


.summary-total {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.summary-total span {

    font-size: 13px;

}


.summary-total strong {

    color: var(--kuska-red);

    font-size: 27px;

}


/* =========================================================
   BUTTON
========================================================= */

.payment-button {

    width: 100%;

    height: 52px;

    margin-top: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    border-radius: 8px;

    background: var(--kuska-red);

    color: white;

    font-size: 14px;

    font-weight: 700;

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;

}


.payment-button span {

    font-size: 24px;

    line-height: 0;

    font-weight: 400;

}


.payment-button:hover {

    background: var(--kuska-red-dark);

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(237,72,74,.3);

}


.summary-security {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    margin-top: 20px;

}


.summary-security > span {

    color: #78c987;

    font-size: 13px;

}


.summary-security p {

    color: #777;

    font-size: 9px;

    line-height: 1.4;

}


/* =========================================================
   FOOTER
========================================================= */

.payment-footer {

    width: 100%;

    padding: 25px 7%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: white;

    border-top: 1px solid rgba(0,0,0,.07);

    color: #888;

    font-size: 10px;

}


.payment-footer div {

    display: flex;

    gap: 25px;

}


.payment-footer a:hover {

    color: var(--kuska-red);

}


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

@media (max-width: 950px) {

    .payment-layout {

        grid-template-columns: 1fr;

    }


    .payment-summary {

        position: relative;

        top: auto;

        order: -1;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    :root {

        --header-height: 65px;

    }


    /* HEADER */

    .payment-header {

        height: var(--header-height);

        padding: 0 20px;

    }


    .payment-logo img {

        width: 115px;

    }


    .payment-secure {

        font-size: 10px;

    }


    .secure-icon {

        width: 21px;
        height: 21px;

    }


    /* PAGE */

    .payment-page {

        padding: 35px 18px 60px;

    }


    /* HEADING */

    .payment-heading {

        margin-bottom: 30px;

    }


    .payment-back {

        margin-bottom: 22px;

        font-size: 12px;

    }


    .payment-eyebrow {

        font-size: 11px;

    }


    .payment-heading h1 {

        font-size: 39px;

        letter-spacing: -1.5px;

    }


    .payment-heading p {

        margin-top: 14px;

        font-size: 13px;

    }


    /* LAYOUT */

    .payment-layout {

        display: flex;

        flex-direction: column;

        gap: 18px;

    }


    /* SUMMARY */

    .payment-summary {

        width: 100%;

        padding: 24px;

        border-radius: 15px;

        order: -1;

    }


    .summary-label {

        margin-bottom: 18px;

        font-size: 9px;

    }


    .summary-product {

        gap: 12px;

    }


    .summary-logo {

        width: 50px;
        height: 50px;

    }


    .summary-logo img {

        width: 38px;

    }


    .summary-product h3 {

        font-size: 16px;

    }


    .summary-product p {

        font-size: 10px;

    }


    .checkout-plan-name {

        font-size: 10px;

    }


    .checkout-plan-period {

        font-size: 8px;

    }


    .summary-divider {

        margin: 18px 0;

    }


    .summary-row {

        font-size: 11px;

    }


    .summary-total strong {

        font-size: 24px;

    }


    .payment-button {

        height: 50px;

        margin-top: 22px;

    }


    /* FORM CARD */

    .payment-form-card {

        padding: 22px;

        border-radius: 15px;

    }


    /* STEPS */

    .payment-step {

        gap: 12px;

    }


    .step-number {

        width: 27px;
        height: 27px;

        font-size: 11px;

    }


    .payment-label {

        font-size: 9px;

    }


    .step-content h2 {

        font-size: 21px;

        margin-bottom: 20px;

    }


    .payment-section-divider {

        width: calc(100% - 39px);

        margin-left: 39px;

        margin-top: 28px;

        margin-bottom: 28px;

    }


    /* COUNTRY */

    .country-selector {

        grid-template-columns: 1fr;

        gap: 8px;

    }


    .country-option {

        min-height: 67px;

        padding: 12px;

    }


    .country-flag {

        font-size: 25px;

    }


    .country-info strong {

        font-size: 12px;

    }


    .country-info small {

        font-size: 8px;

    }


    /* METHODS */

    .payment-method {

        min-height: 66px;

        padding: 11px 12px;

    }


    .method-logo {

        width: 38px;
        height: 38px;

    }


    .method-info strong {

        font-size: 12px;

    }


    .method-info small {

        font-size: 8px;

    }


    /* ALTERNATIVE */

    .alternative-payment {

        padding: 27px 15px;

    }


    .alternative-icon {

        width: 48px;
        height: 48px;

        font-size: 14px;

    }


    .alternative-payment h3 {

        font-size: 15px;

    }


    .alternative-payment p {

        font-size: 11px;

    }


    /* CARD */

    .form-group {

        margin-bottom: 15px;

    }


    .form-group label {

        font-size: 11px;

    }


    .form-group input {

        height: 46px;

        font-size: 12px;

    }


    .form-row {

        gap: 10px;

    }


    .save-card {

        font-size: 9px;

    }


    /* SECURITY */

    .payment-security {

        margin-top: 22px;

        padding-top: 18px;

    }


    .payment-security strong {

        font-size: 10px;

    }


    .payment-security p {

        font-size: 9px;

    }


    /* FOOTER */

    .payment-footer {

        padding: 20px;

        flex-direction: column;

        gap: 12px;

        text-align: center;

    }


    .payment-footer div {

        gap: 18px;

    }

}


/* =========================================================
   FIX RESUMEN DE COMPRA
========================================================= */

.summary-product {
    width: 100%;
}

.summary-product-info {
    min-width: 0;
    flex: 1;
}

.summary-product-info h3 {
    margin-bottom: 4px;
}

.summary-product-info .checkout-plan-name {
    display: block;
    color: #aaa;
    font-size: 11px;
    line-height: 1.3;
}

.summary-product-info .checkout-plan-period {
    display: block;
    margin-top: 3px;
    color: #777;
    font-size: 9px;
    line-height: 1.3;
}

.summary-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.summary-total {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}