/* CARD */

.plan-card {
    width: 100%;
    max-width: 290px;

    border-radius: 22px;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #f3f3f3 100%);

    border: 4px solid #2573e8;

    position: relative;

    overflow: visible;

    margin: 0;

    box-sizing: border-box;
    break-inside: avoid;
}

/* HEADER */

.plan-header {
    padding: 18px 18px 10px;
    text-align: center;
    position: relative;
}

.plan-title {
    font-size: 22px;
    font-weight: 900;
    color: #2573e8;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.plan-subtitle {
    font-size: 11px;
    font-weight: 800;

    color: #5b5b5b;

    text-align: center;
    line-height: 1.3;
}

.old-price {
    font-size: 20px;
    font-weight: 800;
    color: #9b9b9b;
    text-decoration: line-through;
    margin-bottom: 2px;
}

.price-row {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.price-main {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

/* S/ */
.currency {
    font-size: 45px;
    font-weight: 900;
    color: #2573e8;
}

/* 30 */
.price {
    font-size: 45px;
    font-weight: 900;
    color: #2573e8;
}

/* /MES */
.month {
    font-size: 20px;
    font-weight: 900;
    color: #2573e8;
    margin-bottom: 8px;
}


/* TEXTO DE ABAJO */
.price-sub {
    margin-top: 2px;
    font-size: 15px;
    font-weight: 800;
    color: #111;
}

/* BADGE */

.badge {
    position: absolute;
    right: -40px;
    top: 45px;

    width: 90px;
    height: 90px;

    border-radius: 50%;

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

    overflow: visible;
}

/* BORDE ONDEADO */

.badge::before {
    content: "";

    position: absolute;
    inset: 4px;

    border-radius: 50%;
}

/* CENTRO */

.badge-inner {
    position: relative;
    z-index: 2;

    width: 100px;
    height: 88px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.badge-image {
    width: 80px;
    height: 80px;

    object-fit: contain;

    margin-bottom: 4px;
}

/* ICONO */

.badge-icon {
    font-size: 20px;
    color: #f4cf66;
    margin-bottom: 4px;
    line-height: 1;
}

/* TEXTO */

.badge-text {
    text-align: center;

    font-size: 10px;
    font-weight: 900;

    color: #f7d36c;

    line-height: 1.2;
    letter-spacing: .5px;
}

/* LAUNCH */

.launch {
    background: #2573e8;
    color: #fff;

    text-align: center;

    font-size: 10px;
    font-weight: 800;

    padding: 7px 10px;
}

/* FEATURES */

.features {
    padding: 14px 18px 8px;
}

.feature {
    background: #efefef;

    border: 2px solid #d7d7d7;
    border-radius: 10px;

    padding: 9px 12px;

    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-bottom: 12px;

    font-size: 12px;
    font-weight: 700;
    color: #222;
}

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

    border-radius: 6px;

    background: #2573e8;

    color: #fff;

    font-size: 13px;
    font-weight: 900;

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

    margin-top: 2px;
    /* <-- ayuda visual */

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .35),
        0 2px 5px rgba(37, 115, 232, .35);

    flex-shrink: 0;
}

/* TEXTO */

.feature span {
    flex: 1;
    text-align: center;
}

/* LIMITED */

.limited {
    text-align: center;
    font-size: 10px;
    font-weight: 900;
    color: #3a3a3a;

    margin-top: 2px;
    margin-bottom: 12px;
}

/* FOOTER */

.footer {
    padding: 15px 18px 18px;
    text-align: center;
}

.spots {
    font-size: 18px;
    font-weight: 900;
    color: #111;
    margin-bottom: 14px;
}

.spots span {
    color: #fc6747;
}

.btn {
    width: 100%;
    border: none;
    cursor: pointer;

    background:
        linear-gradient(180deg,
            #ff9078 0%,
            #fc6747 100%);

    color: #fff;

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

    padding: 15px 8px;

    border-radius: 999px;

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .25),
        0 10px 20px rgba(0, 0, 0, .25);

    transition: .25s;
}

.btn:hover {
    transform: translateY(-2px);
}

.elite-access {
    display: block;

    margin-top: 18px;

    font-size: 15px;
    font-weight: 700;

    color: #2573e8;

    opacity: .9;
}

/* SELLO */

.gift-seal {
    position: absolute;
    right: -50px;
    top: 50px;

    width: 90px;
    height: 90px;

    border-radius: 50%;

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

    background:
        radial-gradient(circle at 30% 30%,
            #ffeaa0 0%,
            #efc44f 28%,
            #c78f1c 65%,
            #714900 100%);

    box-shadow:
        0 0 0 3px #9a6b09,
        0 0 0 7px #e3bf61,
        0 12px 25px rgba(0, 0, 0, .35);
}

/* BORDE TIPO ONDEADO */

.gift-seal::before {
    content: "";

    position: absolute;
    inset: 5px;

    border-radius: 50%;

    background:
        repeating-conic-gradient(#f6d46d 0deg 10deg,
            #bb830f 10deg 20deg);

    -webkit-mask:
        radial-gradient(circle,
            transparent 58%,
            #000 59%);

    mask:
        radial-gradient(circle,
            transparent 58%,
            #000 59%);
}

/* CENTRO VERDE */

.gift-seal-center {
    position: relative;
    z-index: 2;

    width: 88px;
    height: 88px;

    border-radius: 50%;

    background:
        radial-gradient(circle at top,
            #2573e8,
            #083c8a 75%);

    border: 2px solid #f1d06b;

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

    overflow: hidden;

    box-shadow:
        inset 0 0 12px rgba(255, 255, 255, .15),
        inset 0 0 25px rgba(0, 0, 0, .4);
}

/* HOJAS */

.gift-laurel {
    position: absolute;
    top: 50%;

    transform: translateY(-50%) rotate(90deg);

    font-size: 10px;
    font-weight: 900;

    color: #fff;

    opacity: .9;
}

.gift-laurel.left {
    left: -1px;
}

.gift-laurel.right {
    right: -1px;
}

/* CONTENIDO */

.gift-content {
    text-align: center;
    color: #fff;
}

.gift-title {
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 2px;
}

.gift-main {
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 4px;
}

.gift-sub {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
}