/* =========================================================
   TABLA DE PRECIOS — ESTILO BOW / INVITACIONES
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700&family=Allura&display=swap');


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

.tpp-pricing-wrapper {
    display: flex;
    flex-wrap: wrap;

    justify-content: center;
    align-items: stretch;

    gap: 24px;

    max-width: 1180px;

    margin: 70px auto;

    padding: 20px;

    font-family: 'DM Sans', sans-serif;

    box-sizing: border-box;
}


/* =========================================================
   TARJETA
   ========================================================= */

.tpp-pricing-card {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 560px;

    padding: 42px 34px 34px;

    background: #fffdfa;

    border: 1px solid #eee7dc;
    border-radius: 18px;

    box-shadow:
        0 8px 30px rgba(21, 39, 59, 0.055);

    text-align: center;

    z-index: 1;

    box-sizing: border-box;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


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

h2.tpp-price {
    margin: 1.4rem !important;
}

.tpp-price {
    margin: 0 0 12px;

    color: #102c47;

    font-family: 'Playfair Display', serif;

    font-size: 47px;

    font-weight: 600;

    line-height: 1.1;

    letter-spacing: -1px;
}


.tpp-price::first-letter {
    letter-spacing: 0;
}


/* =========================================================
   HOVER CARD
   ========================================================= */

.tpp-pricing-card:hover {
    transform: translateY(-7px);

    border-color: #ead8cf;

    box-shadow:
        0 18px 45px rgba(21, 39, 59, 0.10);
}


/* =========================================================
   PLAN DESTACADO
   ========================================================= */

.tpp-pricing-card.tpp-destacado {
    background:
        linear-gradient(
            180deg,
            #fffaf6 0%,
            #fffdf9 100%
        );

    border: 1.5px solid #e97864;

    transform: translateY(-10px);

    box-shadow:
        0 22px 55px rgba(233, 120, 100, 0.14);

    z-index: 2;
}


.tpp-pricing-card.tpp-destacado:hover {
    transform: translateY(-17px);

    box-shadow:
        0 28px 65px rgba(233, 120, 100, 0.19);
}


/* =========================================================
   ETIQUETA MÁS ELEGIDO
   ========================================================= */

.tpp-pricing-card.tpp-destacado::before {
    content: 'MÁS ELEGIDO';

    position: absolute;

    top: -15px;
    left: 50%;

    transform: translateX(-50%);

    padding: 7px 20px;

    background: #e97864;

    color: #ffffff;

    border-radius: 30px;

    font-family: 'DM Sans', sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.7px;

    white-space: nowrap;

    box-shadow:
        0 6px 18px rgba(233, 120, 100, 0.25);

    z-index: 5;
}


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

.tpp-card-header {
    display: flex;

    flex-direction: column;

    align-items: center;

    border-bottom: 1px solid #f6e2cd;

    padding-bottom: 20px;

    margin-bottom: 20px;
}


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

.tpp-icon-wrapper {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 58px;
    height: 58px;

    margin-bottom: 23px;

    background: #f9eee9;

    color: #df705d;

    border: 1px solid #f1d8d0;

    border-radius: 50%;

    font-size: 25px;

    transition: all 0.3s ease;
}


.tpp-pricing-card:hover .tpp-icon-wrapper {
    transform: translateY(-2px);
}


.tpp-destacado .tpp-icon-wrapper {
    background: #e97864;

    color: #ffffff;

    border-color: #e97864;

    box-shadow:
        0 8px 20px rgba(233, 120, 100, 0.20);
}


/* =========================================================
   NOMBRE DEL PLAN
   ========================================================= */

.tpp-subtitle {
    display: block;

    margin-bottom: 8px;

    color: #e16f5c;

    font-family: 'DM Sans', sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


.tpp-destacado .tpp-subtitle {
    color: #c95d4b;
}


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

.tpp-desc {
    min-height: 45px;

    margin: 0 0 30px;

    color: #66707a;

    font-family: 'DM Sans', sans-serif;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.6;
}


/* =========================================================
   CARACTERÍSTICAS
   ========================================================= */

.tpp-features {
    list-style: none;

    width: 100%;

    padding: 0;

    margin: 0 0 32px;

    text-align: left;
}


.tpp-features li {
    display: flex;

    align-items: center;

    gap: 11px;

    padding: 12px 0;

    border-bottom: 1px solid #eee9e2;

    color: #344354;

    font-family: 'DM Sans', sans-serif;

    font-size: 14px;

    line-height: 1.4;
}


.tpp-features li:last-child {
    border-bottom: none;
}


.tpp-features li i {
    flex-shrink: 0;

    color: #e97864;

    font-size: 20px;
}


.tpp-destacado .tpp-features li i {
    color: #e16d59;
}


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

.tpp-button {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    width: 100%;

    margin-top: auto;

    padding: 15px 22px;

    background: transparent;

    color: #e16f5c;

    border: 1.5px solid #e97864;

    border-radius: 9px;

    text-decoration: none;

    font-family: 'DM Sans', sans-serif;

    font-size: 14px;

    font-weight: 600;

    box-sizing: border-box;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* =========================================================
   FLECHA
   ========================================================= */

.tpp-button i {
    font-size: 17px;

    transition: transform 0.3s ease;
}


.tpp-button:hover i {
    transform: translate(3px, -3px);
}


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

.tpp-button:hover {
    background: #e97864;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(233, 120, 100, 0.20);
}


/* =========================================================
   BOTÓN PLAN DESTACADO
   ========================================================= */

.tpp-destacado .tpp-button {
    background: #e97864;

    color: #ffffff;

    border-color: #e97864;

    box-shadow:
        0 8px 22px rgba(233, 120, 100, 0.22);
}


.tpp-destacado .tpp-button:hover {
    background: #d96653;

    border-color: #d96653;

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(233, 120, 100, 0.28);
}


/* =========================================================
   IMAGEN DEL PLAN
   ========================================================= */

.tpp-plan-img {
    width: 58px;

    height: 58px;

    margin-bottom: 23px;

    object-fit: cover;

    border: 1px solid #f1d8d0;

    border-radius: 50%;

    box-shadow:
        0 5px 15px rgba(21, 39, 59, 0.08);
}


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

@media (max-width: 992px) {

    .tpp-pricing-wrapper {

        gap: 22px;

        margin: 60px auto;
    }


    .tpp-pricing-card {

        width: 300px;
    }


    .tpp-pricing-card.tpp-destacado {

        transform: none;
    }


    .tpp-pricing-card.tpp-destacado:hover {

        transform: translateY(-7px);
    }

}

/* =========================================================
   MOBILE — CARRUSEL CON PEEK + SCROLL VERTICAL NORMAL
   ========================================================= */

@media (max-width: 767px) {

    /* -----------------------------------------------------
       CONTENEDOR DEL CARRUSEL
       ----------------------------------------------------- */

    .tpp-pricing-wrapper {

        display: flex;
        flex-wrap: nowrap;

        justify-content: flex-start;
        align-items: stretch;

        gap: 16px;

        width: 100%;
        max-width: none;

        margin: 45px 0;

        padding: 25px 20px 35px;

        box-sizing: border-box;

        /*
         * Carrusel horizontal
         */
        overflow-x: auto;

        /*
         * MUY IMPORTANTE:
         * permitimos que el contenido vertical
         * de la página siga funcionando.
         */
        overflow-y: hidden;

        /*
         * Scroll nativo de iOS
         */
        -webkit-overflow-scrolling: touch;

        /*
         * Snap preciso.
         */
        scroll-snap-type: x mandatory;

        scroll-padding-left: 20px;

        /*
         * NO usar touch-action: pan-x aquí.
         *
         * El navegador decidirá automáticamente
         * si el gesto es vertical u horizontal.
         */

        overscroll-behavior-x: contain;

        /*
         * Ocultar scrollbar
         */
        scrollbar-width: none;
    }


    .tpp-pricing-wrapper::-webkit-scrollbar {
        display: none;
    }


    /* -----------------------------------------------------
       CARDS
       ----------------------------------------------------- */

    .tpp-pricing-card {

        /*
         * Ancho de la card.
         *
         * Deja visible parte de la siguiente.
         */
        flex: 0 0 84%;

        width: 84%;

        max-width: none;

        min-height: auto;

        padding: 38px 27px 28px;

        border-radius: 16px;

        box-sizing: border-box;

        /*
         * Cada tarjeta es un punto de parada.
         */
        scroll-snap-align: start;

        /*
         * Evita que un swipe rápido
         * se salte varias tarjetas.
         */
        scroll-snap-stop: always;

        /*
         * Eliminamos el movimiento de hover
         * en mobile.
         */
        transform: none !important;

        /*
         * IMPORTANTE:
         * NO poner touch-action: pan-x.
         */
    }


    /* -----------------------------------------------------
       ELEMENTOS INTERNOS
       ----------------------------------------------------- */

    .tpp-pricing-card * {
        /*
         * Permite seleccionar/interactuar normalmente
         * con los elementos.
         */
        user-select: auto;

        -webkit-user-select: auto;
    }


    /* -----------------------------------------------------
       HOVER
       ----------------------------------------------------- */

    .tpp-pricing-card:hover {

        transform: none !important;

        border-color: #eee7dc;

        box-shadow:
            0 8px 30px rgba(21, 39, 59, 0.055);
    }


    /* -----------------------------------------------------
       PLAN DESTACADO
       ----------------------------------------------------- */

    .tpp-pricing-card.tpp-destacado {

        transform: none !important;

        margin-top: 0;

        z-index: 2;
    }


    .tpp-pricing-card.tpp-destacado:hover {

        transform: none !important;

        box-shadow:
            0 22px 55px rgba(233, 120, 100, 0.14);
    }


    /* -----------------------------------------------------
       ETIQUETA MÁS ELEGIDO
       ----------------------------------------------------- */

    .tpp-pricing-card.tpp-destacado::before {

        top: -14px;

        z-index: 10;
    }


    /* -----------------------------------------------------
       PRECIO
       ----------------------------------------------------- */

    .tpp-price {
        font-size: 43px;
    }


    /* -----------------------------------------------------
       FEATURES
       ----------------------------------------------------- */

    .tpp-features {
        margin-bottom: 27px;
    }


    .tpp-features li {
        padding: 11px 0;
    }

}


/* =========================================================
   MOBILE PEQUEÑO
   ========================================================= */

@media (max-width: 380px) {

    .tpp-pricing-wrapper {

        gap: 14px;

        padding-left: 16px;
        padding-right: 16px;

        scroll-padding-left: 16px;
    }


    .tpp-pricing-card {

        flex-basis: 86%;

        width: 86%;

        padding: 35px 22px 25px;
    }


    .tpp-price {
        font-size: 39px;
    }

}
.tpp-discount-label {
    background-color: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 9999px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom:8px;
}

ul.tpp-features{
    padding-left:0px!important;
}

h2.tpp-price-oferta {
    margin-top: 0px!important;
    font-size:2rem;
}