/* =========================================================
   MEMBERSHIPS.CSS
========================================================= */


/* =========================================================
   VARIABLES DE LA SECCIÓN
========================================================= */

.memberships {

    --membership-color: #ff653f;
    --membership-color-dark: #f04d35;

    width: 100%;

    padding-block:
        clamp(4rem, 8vw, 7rem);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7fbff 100%
        );

    overflow: hidden;

    --membership-color: #ff653f;
    --membership-color-dark: #f04d35;

    --membership-gradient-start: #ff8b2e;
    --membership-gradient-end: #f4434f;
}


/* =========================================================
   CONTENEDOR
========================================================= */

.memberships__container {

    width: min(92%, 75rem);

    margin-inline: auto;
}


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

.memberships__header {

    max-width: 52rem;

    margin-inline: auto;

    text-align: center;

    margin-bottom:
        clamp(2rem, 4vw, 3rem);
}


.memberships__eyebrow {

    display: block;

    margin-bottom: .65rem;

    color: #1688e8;

    font-size:
        clamp(.7rem, 1vw, .85rem);

    font-weight: 700;

    letter-spacing: .28em;
}


.memberships__heading {

    margin: 0;

    color: #122e68;

    font-size:
        clamp(2rem, 4vw, 3.4rem);

    line-height: 1.08;

    letter-spacing: -.04em;
}


.memberships__description {

    max-width: 42rem;

    margin:
        1rem auto 0;

    color: #60769a;

    font-size:
        clamp(.9rem, 1.5vw, 1.1rem);

    line-height: 1.6;
}


/* =========================================================
   SELECTOR
========================================================= */

.membership-selector {

    width: min(100%, 42rem);

    margin-inline: auto;

    padding: .35rem;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: .35rem;

    border-radius: 5rem;

    background: #edf5fd;
}


/* =========================================================
   ITEM DEL SELECTOR
========================================================= */

.membership-selector__item {

    position: relative;

    min-width: 0;

    min-height: 4.2rem;

    padding:
        .55rem
        clamp(.7rem, 2vw, 1.2rem);

    display: flex;

    align-items: center;

    justify-content: center;

    gap: .7rem;

    border: 0;

    border-radius: 4rem;

    background: transparent;

    color: #46638b;

    cursor: pointer;

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


.membership-selector__item:hover {

    transform: translateY(-1px);
}


.membership-selector__item.is-active {

    background: var(--membership-color);

    color: #ffffff;

    box-shadow:
        0 .5rem 1.5rem
        color-mix(
            in srgb,
            var(--membership-color) 30%,
            transparent
        );
}


/* =========================================================
   ICONO
========================================================= */

.membership-selector__icon {

    width: 2.25rem;

    aspect-ratio: 1;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

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

    color: #2860a6;

    font-size: 1.1rem;

    font-weight: 700;
}


.membership-selector__item.is-active
.membership-selector__icon {

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

    color: #ffffff;
}


/* =========================================================
   TEXTO SELECTOR
========================================================= */

.membership-selector__text {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    line-height: 1.1;
}


.membership-selector__text strong {

    font-size:
        clamp(.75rem, 1.2vw, .95rem);
}


.membership-selector__text small {

    margin-top: .25rem;

    font-size:
        clamp(.65rem, 1vw, .78rem);

    opacity: .8;
}


/* =========================================================
   PROGRESS
========================================================= */

.membership-progress {

    width: min(100%, 42rem);

    margin:
        1.3rem auto
        clamp(2rem, 4vw, 3.5rem);

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    align-items: center;

    position: relative;
}


.membership-progress::before {

    content: "";

    position: absolute;

    top: 50%;

    left: 12.5%;

    right: 12.5%;

    height: 1px;

    background: #d2e1f0;

    transform: translateY(-50%);

    z-index: 0;
}


.membership-progress span {

    position: relative;

    z-index: 1;

    justify-self: center;

    width: .65rem;

    aspect-ratio: 1;

    border-radius: 50%;

    background: #c6d7e9;

    box-shadow:
        0 0 0 .3rem #f7fbff;
}


.membership-progress span.is-active {

    width: .85rem;

    background: var(--membership-color);

    box-shadow:
        0 0 0 .3rem #ffffff,
        0 0 0 .4rem
        color-mix(
            in srgb,
            var(--membership-color) 20%,
            transparent
        );
}


/* =========================================================
   PANEL
========================================================= */

.membership-panel {

    display: grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(0, 1.05fr);

    min-height: 34rem;

    overflow: hidden;

    border-radius: 1.5rem;

    background: #ffffff;

    box-shadow:
        0 1.5rem 4rem rgba(37, 90, 140, .10);

    border: 1px solid #edf3f8;
}


/* =========================================================
   VISUAL
========================================================= */

.membership-panel__visual {

    position: relative;

    min-height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: clamp(2rem, 5vw, 4rem);

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--membership-gradient-start),
            var(--membership-gradient-end)
        );

    transition:
        background .4s ease;
}


/* Imagen */

.membership-panel__visual img {

    position: relative;

    z-index: 2;

    display: block;

    width: min(100%, 25rem);

    height: auto;

    filter:
        drop-shadow(
            0 1.5rem 1.5rem
            rgba(0,0,0,.18)
        );

    transform:
        rotate(-3deg);

    transition:
        opacity .25s ease,
        transform .4s ease;
}


/* círculos decorativos */

.membership-panel__visual::before {

    content: "";

    position: absolute;

    width: 28rem;

    aspect-ratio: 1;

    border-radius: 50%;

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

    right: -12rem;

    top: -8rem;
}


.membership-panel__visual::after {

    content: "";

    position: absolute;

    width: 18rem;

    aspect-ratio: 1;

    border-radius: 50%;

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

    left: -9rem;

    bottom: -8rem;
}


/* =========================================================
   TEXTO SOBRE VISUAL
========================================================= */

.membership-panel__visual-content {

    position: absolute;

    left: clamp(1.5rem, 3vw, 2.5rem);

    top: clamp(1.5rem, 3vw, 2.5rem);

    z-index: 3;

    color: #ffffff;

    display: flex;

    flex-direction: column;
}


.membership-panel__visual-content span {

    font-size: .7rem;

    letter-spacing: .25em;

    opacity: .8;
}


.membership-panel__visual-content strong {

    margin-top: .3rem;

    font-size:
        clamp(2rem, 4vw, 3.5rem);

    line-height: .95;
}


/* =========================================================
   CONTENIDO
========================================================= */

.membership-panel__content {

    padding:
        clamp(2rem, 4vw, 3.5rem);

    display: flex;

    flex-direction: column;
}


/* =========================================================
   TOP
========================================================= */

.membership-panel__top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;
}


.membership-panel__name {

    color: var(--membership-color);

    font-size: .85rem;

    font-weight: 800;

    letter-spacing: .15em;
}


.membership-panel__badge {

    padding:
        .45rem
        .75rem;

    border-radius: 2rem;

    background:
        color-mix(
            in srgb,
            var(--membership-color) 10%,
            white
        );

    color: var(--membership-color);

    font-size: .68rem;

    font-weight: 700;

    letter-spacing: .04em;
}


/* =========================================================
   TÍTULO
========================================================= */

.membership-panel__title {

    margin:
        1rem 0 .6rem;

    color: #142f68;

    font-size:
        clamp(1.7rem, 3vw, 2.5rem);

    line-height: 1.1;

    letter-spacing: -.035em;
}


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

.membership-panel__price {

    color: var(--membership-color);

    font-size:
        clamp(1.7rem, 3vw, 2.25rem);

    font-weight: 800;
}


.membership-panel__price small {

    color: #7285a3;

    font-size: .85rem;

    font-weight: 500;
}


/* =========================================================
   DESCRIPCIÓN
========================================================= */

.membership-panel__description {

    max-width: 32rem;

    margin:
        .8rem 0 1.4rem;

    color: #667a99;

    font-size:
        clamp(.85rem, 1.3vw, .98rem);

    line-height: 1.55;
}


/* =========================================================
   BENEFICIOS
========================================================= */

.membership-benefits {

    display: grid;

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

    gap:
        .8rem
        1.3rem;

    margin: 0;

    padding: 0;

    list-style: none;
}


.membership-benefits li {

    display: flex;

    align-items: flex-start;

    gap: .6rem;

    color: #3f587c;

    font-size:
        clamp(.78rem, 1.2vw, .9rem);

    line-height: 1.4;
}


.membership-benefits li span {

    display: grid;

    place-items: center;

    flex-shrink: 0;

    width: 1.25rem;

    aspect-ratio: 1;

    margin-top: .05rem;

    border-radius: 50%;

    background: var(--membership-color);

    color: #ffffff;

    font-size: .7rem;

    font-weight: 800;
}


/* =========================================================
   BOTÓN
========================================================= */

.membership-panel__button {

    width: 100%;

    min-height: 3rem;

    margin-top: 1rem;

    padding-inline: 1.5rem;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: .7rem;

    border-radius: .6rem;

    background: var(--membership-color);

    color: #ffffff;

    font-size: .9rem;

    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 .6rem 1.3rem
        color-mix(
            in srgb,
            var(--membership-color) 20%,
            transparent
        );

    transition:
        transform .2s ease,
        background .2s ease;
}


.membership-panel__button:hover {

    transform: translateY(-2px);

    background: var(--membership-color-dark);
}


.membership-panel__button span {

    font-size: 1.2rem;
}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.membership-highlights {

    margin-top: 3rem;

    display: grid;

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


.membership-highlight {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: .8rem;

    padding-inline: 1rem;

    border-right: 1px solid #dce7f2;
}


.membership-highlight:last-child {

    border-right: 0;
}


.membership-highlight > span {

    color: #167fe2;

    font-size: 1.7rem;
}


.membership-highlight p {

    margin: 0;

    color: #557093;

    font-size: .8rem;

    line-height: 1.4;
}





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

@media (max-width: 40rem) {

    .memberships {

        padding-block: 3.5rem;
    }


    .memberships__container {

        width: 90%;
    }


    .membership-selector {

        border-radius: 1rem;

        grid-template-columns:
            repeat(4, 1fr);

        gap: .2rem;
    }


    .membership-selector__item {

        min-height: 4rem;

        padding: .4rem;

        flex-direction: column;

        gap: .25rem;

        border-radius: .8rem;
    }


    .membership-selector__icon {

        width: 1.8rem;

        font-size: .85rem;
    }


    .membership-selector__text {

        align-items: center;
    }


    .membership-selector__text small {

        display: none;
    }


    .membership-progress {

        margin-bottom: 2rem;
    }


    .membership-panel {
        /* Las cuatro membresías comparten este panel: visual arriba, contenido abajo. */
        display: flex;
        flex-direction: column;
        min-height: auto;


        border-radius: 1rem;
    }


    .membership-panel__visual {

        min-height: 20rem;

        padding: 1.5rem;
        flex-direction: column;
        gap: 1.5rem;
    }


    .membership-panel__visual img {

        width: min(85%, 20rem);
        order: 1;
    }


    /* El título participa en el flujo para no superponerse con la imagen. */
    .membership-panel__visual-content {
        position: relative;
        inset: auto;
        align-self: flex-start;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .membership-panel__content {

        padding: 1.5rem;

        min-height: auto;
    }


    .membership-panel__top {

        align-items: flex-start;

        flex-direction: column-reverse;

        gap: .5rem;
    }


    .membership-benefits {

        grid-template-columns: 1fr;

        gap: .75rem;
    }


    .membership-panel__button {

        margin-top: 2rem;
    }


    .membership-highlights {

        grid-template-columns: 1fr;

        gap: 1.2rem;

        margin-top: 2.5rem;
    }


    .membership-highlight {

        justify-content: flex-start;

        padding:
            .8rem 0;

        border-right: 0;

        border-bottom: 1px solid #dce7f2;
    }


    .membership-highlight:last-child {

        border-bottom: 0;
    }

}


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

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

    .memberships * {

        transition: none !important;
    }

}