body {

        font-family: 'Inter', sans-serif;
        background-color: #f9fafb;
        margin: 0;

        padding: 0;
    }
    .plan-container-list {
        max-width: 1280px;
        margin: 0 auto;
        padding: 3rem 1.5rem;
    }
    .plan-container-list .header-content {
        text-align: center;
        margin-bottom: 3rem;
        padding: 0 1rem;
    }
    .plan-container-list .header-title {
        font-size: 2.25rem;
        line-height: 2.5rem;
        font-weight: 800;
        color: #1f2937;
        margin-bottom: 0.75rem;
    }



    .plan-container-list .header-subtitle {

        font-size: 1.25rem;
        /* text-xl */

        line-height: 1.75rem;

        color: #6b7280;
        /* Antes var(--gray-text) */

    }



    /* Contenedor de Tarjetas */

    .plan-container-list .plan-cards-container {

        display: flex;

        overflow-x: auto;

        gap: 1.5rem;
        /* space-x-6 */

        padding: 0 1rem 1.5rem 1rem;
        /* px-4 pb-6 */



        /* Asegurar el scroll en iOS */

        -webkit-overflow-scrolling: touch;

    }



    @media (min-width: 1024px) {
        /* lg breakpoint */

        .plan-container-list .plan-cards-container {

            overflow-x: visible;

            justify-content: center;

            gap: 2rem;
            /* lg:space-x-8 */

        }

    }



    /* Estilos de la Tarjeta Individual */

    .plan-container-list .plan-item {

        width: 20rem;
        /* w-80 */

        flex-shrink: 0;

    }



    @media (min-width: 1024px) {
        /* lg breakpoint */

        .plan-container-list .plan-item {

            width: 25%;
            /* lg:w-1/4 */

        }

    }



    .plan-container-list .plan-card-inner {

        height: 100%;

        background-color: white;

        padding: 1.75rem;
        /* p-7 */

        border-radius: 0.75rem;
        /* rounded-xl */

        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
        /* shadow-lg */

        border: 1px solid #e5e7eb;
        /* Antes var(--gray-border) */

        transition: transform 300ms ease-in-out, box-shadow 300ms ease-in-out;

        position: relative;

    }



    .plan-container-list .plan-card-inner:hover {

        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

        transform: translateY(-4px);

    }



    /* Contenido de la Tarjeta */

    .plan-container-list .plan-title {

        font-size: 1.5rem;
        /* text-2xl */

        font-weight: 700;

        margin-bottom: 0.25rem;

        color: #1f2937;
        /* Antes var(--dark-text) */

    }



    .plan-container-list .plan-price-text {

        font-weight: 700;

        font-size: 1.5rem;
        /* text-2xl */

        margin-bottom: 1.5rem;
        /* mb-6 */

    }



    .plan-container-list .price-small {

        font-size: 1rem;

        font-weight: 500;

        color: #6b7280;
        /* Antes var(--gray-text) */

        margin-bottom: 0.25rem;

    }



    /* Lista de Características */

    .plan-container-list .plan-features-list {

        list-style: none;

        padding: 0;

        margin-bottom: 2rem;
        /* mb-8 */

        text-align: left;

        min-height: 180px;
        /* Altura consistente */

    }



    .plan-container-list .plan-features-list li {

        display: flex;

        align-items: flex-start;

        margin-bottom: 0.75rem;
        /* space-y-3 */

        color: #6b7280;
        /* Antes var(--gray-text) */



    }

    .label-new {
        color: red;
        font-weight: bold;
        font-family: cursive;
        transform: rotate(-16deg);
        text-decoration: underline;
    }


    .plan-container-list .feature-icon {

        color: #0d6efd;
        /* Antes var(--primary-blue) */

        margin-right: 0.5rem;

        font-size: 1.125rem;
        /* text-lg */

    }



    /* Plan Destacado (Plan Básico) */

    .plan-container-list .plan-highlight {

        border: 2px solid #0d6efd;
        /* Antes var(--primary-blue) */

        background-color: #eff6ff;
        /* bg-blue-50 */

        box-shadow: 0 20px 25px -5px rgba(13, 110, 253, 0.2), 0 8px 10px -6px rgba(13, 110, 253, 0.1);
        /* shadow-2xl con color primario */

    }



    /* Badge de Oferta */

    .plan-container-list .offer-badge {

        position: absolute;

        top: 18px;

        right: 0;

        margin-top: -0.75rem;
        /* -mt-3 */

        margin-right: -0.75rem;
        /* -mr-3 */

        background-color: #dc3545;
        /* Antes var(--accent-red) */

        color: white;

        font-size: 0.75rem;
        /* text-xs */

        font-weight: 700;

        padding: 0.25rem 0.75rem;
        /* px-3 py-1 */

        border-radius: 9999px;
        /* rounded-full */

        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

        transform: rotate(6deg);

        display: inline-block;

    }



    /* Botones */

    .plan-container-list .btn-plan {

        display: block;

        width: 100%;

        padding: 0.75rem 0;
        /* py-3 */

        border-radius: 0.5rem;
        /* rounded-lg */

        font-weight: 600;

        text-align: center;

        text-decoration: none;

        transition: background-color 200ms ease-in-out, color 200ms ease-in-out, border-color 200ms ease-in-out;

        margin-top: auto;

    }
    .plan-container-list .btn-default {
        color: #0d6efd;
        border: 1px solid #0d6efd;
        background-color: transparent;
    }

    .plan-container-list .btn-default:hover {
        background-color: #0d6efd;
        color: white;
    }
    .plan-container-list .btn-highlight {
        background-color: #0d6efd;
        color: white;
        border: 1px solid #0d6efd;
        box-shadow: 0 10px 15px -3px rgba(13, 110, 253, 0.3);
    }

    .plan-container-list .btn-highlight:hover {
        background-color: #0c5edb;
    }
    #login-form button {
        padding: 5px 1rem
    }