/* Estilos para la página de planes premium */
#app
{
    min-height: calc(100vh - 70px);
}

/* Plan select btn */
.plan-select-btn
{
    width: 100%;
}

/* Pricing hero */
.pricing-hero
{
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-gradient) 100%);
    padding: 60px var(--spacing);
    text-align: center;
    color: var(--color-white);
}

/* Hero content */
.hero-content h1
{
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin: 0 0 var(--spacing-sm) 0;
}

/* Hero content */
.hero-content p
{
    font-size: var(--font-size-lg);
    margin: 0;
    opacity: 0.9;
}

/* Subscription status */
.subscription-status
{
    padding: var(--spacing);
    display: flex;
    justify-content: center;
    margin-top: -30px;
    position: relative;
    z-index: 10;
}

/* Iconos con fondo primary-alpha */
.plan-icon,
.benefit-icon
{
    background-color: var(--color-primary-alpha);
}

/* Status icon */
.status-icon
{
    width: 60px;
    height: 60px;
    background-color: var(--color-premium);
    flex-shrink: 0;
}

/* Status icon */
.status-icon i
{
    font-size: var(--font-size-3xl);
    color: var(--color-white);
}

/* Status info */
.status-info h3
{
    margin: 0 0 5px 0;
    color: var(--color-premium);
    font-size: var(--font-size-lg);
}

/* Status info */
.status-info p
{
    margin: 0;
    color: var(--color-premium);
}

/* Days remaining */
.days-remaining
{
    color: var(--color-primary);
    font-weight: 500;
    margin-top: 5px !important;
}

/* Pricing section */
.pricing-section
{
    padding: 40px var(--spacing);
    flex: 1;
}

/* Pricing container */
.pricing-container
{
    max-width: 1200px;
    margin: 0 auto;
}

/* Plans grid */
.plans-grid
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: clamp(var(--spacing), 1.5vw, 20px);
}

/* Plan card */
.plan-card
{
    background-color: var(--color-bg-card);
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--color-border);
    padding: var(--spacing-xl) var(--spacing-xl);
    text-align: center;
    position: relative;
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
}

/* Plan card */
.plan-card:hover
{
    transform: translateY(var(--transform-hover));
    box-shadow: var(--shadow);
    border-color: var(--color-primary);
}

/* Popular */
.plan-card.popular
{
    border-color: var(--color-premium);
    box-shadow: var(--shadow);
}

/* Popular */
.plan-card.popular::before
{
    content: 'Más Popular';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-premium);
    color: var(--color-white);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
}

/* Plan icon */
.plan-icon
{
    width: 60px;
    height: 60px;
    margin: 0 auto var(--spacing-md);
}

/* Iconos dentro de círculos — color compartido */
.plan-icon i,
.benefit-icon i
{
    color: var(--color-primary);
}

/* Plan icon */
.plan-icon i
{
    font-size: var(--font-size-2xl);
}

/* Plan name */
.plan-name
{
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0 0 5px 0;
}

/* Plan duration */
.plan-duration
{
    color: var(--color-text-light);
    margin: 0 0 var(--spacing) 0;
}

/* Plan price */
.plan-price
{
    margin-bottom: var(--spacing-md);
}

/* Currency */
.plan-price .currency
{
    font-weight: 500;
    color: var(--color-text-dark);
    vertical-align: top;
}

/* Amount */
.plan-price .amount
{
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-primary);
}

/* Period */
.plan-price .period
{
    color: var(--color-text-light);
    display: block;
    margin-top: 5px;
}

/* Plan savings */
.plan-savings
{
    background-color: var(--color-success);
    color: var(--color-white);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    display: inline-block;
    margin-bottom: var(--spacing-md);
}

/* Plan features */
.plan-features
{
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-md) 0;
    text-align: left;
    flex: 1;
}

/* Plan features */
.plan-features li
{
    padding: var(--spacing-sm) 0;
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
}

/* Plan features */
.plan-features li i
{
    color: var(--color-success);
}

/* Benefits section */
.benefits-section
{
    padding: 60px var(--spacing);
    background-color: var(--color-bg-card);
}

/* Faq section */
.benefits-section h2,
.faq-section h2
{
    text-align: center;
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
    margin: 0 0 40px 0;
}

/* Benefits grid */
.benefits-grid
{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(var(--spacing-sm), 2.5vw, 30px);
    max-width: 1200px;
    margin: 0 auto;
}

/* Benefit card */
.benefit-card
{
    text-align: center;
    padding: var(--spacing);
}

/* Benefit icon */
.benefit-icon
{
    width: 70px;
    height: 70px;
    margin: 0 auto var(--spacing-md);
}

/* Benefit icon */
.benefit-icon i
{
    font-size: var(--font-size-3xl);
}

/* Benefit card */
.benefit-card h3
{
    color: var(--color-text-dark);
    margin: 0 0 var(--spacing-sm) 0;
}

/* Benefit card */
.benefit-card p
{
    color: var(--color-text-light);
    margin: 0;
}

/* WhatsApp CTA section */
.whatsapp-cta-section
{
    text-align: center;
    padding: var(--spacing-xl) var(--spacing);
    background-color: var(--color-bg-card);
    border-top: var(--border-width) solid var(--color-border);
    border-bottom: var(--border-width) solid var(--color-border);
}

/* WhatsApp CTA section title */
.whatsapp-cta-section h2
{
    margin-bottom: var(--spacing-sm);
}

/* WhatsApp CTA section description */
.whatsapp-cta-section p
{
    color: var(--color-text-light);
    margin-bottom: var(--spacing-lg);
}

/* WhatsApp button */
.btn-whatsapp
{
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
    padding: var(--spacing-sm) var(--spacing-xl);
    background-color: #25d366;
    color: var(--color-white);
    text-decoration: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: var(--font-size-lg);
    transition: all var(--transition);
}

/* WhatsApp button hover */
.btn-whatsapp:hover
{
    background-color: #1ebe5c;
    transform: translateY(var(--transform-hover));
    box-shadow: var(--shadow-hover);
}

/* WhatsApp inline link */
.whatsapp-link
{
    color: #1ebe5c;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* WhatsApp inline link hover */
.whatsapp-link:hover
{
    text-decoration: underline;
}

/* Pricing footer */
.pricing-footer
{
    padding: var(--spacing-xl) var(--spacing);
    text-align: center;
    background-color: var(--color-bg-card);
    border-top: var(--border-width) solid var(--color-border);
}

/* Pricing footer */
.pricing-footer p
{
    margin: 0;
    color: var(--color-text-light);
}

/* Pricing footer */
.pricing-footer a
{
    color: var(--color-primary);
    text-decoration: none;
}

/* Pricing footer */
.pricing-footer a:hover
{
    text-decoration: underline;
}

/* Responsive: landscape */
@media screen and (min-width: 48rem) and (max-width: 64rem) and (orientation: landscape)
{
    /* Benefits grid */
    .benefits-grid
    {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Pricing hero */
    .pricing-hero
    {
        padding: var(--spacing-xl) var(--spacing);
    }

    /* Plan card */
    .plan-card
    {
        padding: var(--spacing-lg) var(--spacing-lg);
    }

    /* Plan icon */
    .plan-icon
    {
        width: 3.5rem;
        height: 3.5rem;
    }

}

/* Tablet portrait + Móvil vertical — reglas compartidas */
@media screen and (max-width: 48rem) and (orientation: portrait)
{
    /* Benefits grid */
    .benefits-grid
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

/* Responsive: tablet vertical */
@media screen and (min-width: 30rem) and (max-width: 48rem) and (orientation: portrait)
{
    /* Plans grid */
    .plans-grid
    {
        max-width: 48rem;
        margin: 0 auto;
    }

    /* Plan card */
    .plan-card
    {
        max-width: none;
        padding: var(--spacing-lg) var(--spacing);
    }

    /* Benefits grid */
    .benefits-grid
    {
        max-width: 48rem;
    }

    /* Plan icon */
    .plan-icon
    {
        width: 3.25rem;
        height: 3.25rem;
    }

    /* Pricing section */
    .benefits-section,
    .pricing-section
    {
        padding: var(--spacing-xl) var(--spacing);
    }

    /* Subscription status */
    .subscription-status
    {
        margin-top: calc(-1 * var(--spacing));
    }

    /* Status icon */
    .status-icon
    {
        width: 3rem;
        height: 3rem;
    }

}

/* Móvil Vertical (max-width: 30rem / 480px) */
@media screen and (max-width: 30rem) and (orientation: portrait)
{
    /* Pricing hero */
    .pricing-hero
    {
        padding: var(--spacing) var(--spacing-sm);
    }

    /* Pricing hero */
    .pricing-hero h1
    {
        font-size: var(--font-size-xl);
        margin-bottom: var(--spacing-sm);
    }

    /* Pricing hero */
    .pricing-hero p
    {
        font-size: var(--font-size-sm);
    }

    /* Subscription status */
    .subscription-status
    {
        padding: var(--spacing-sm);
        margin-top: calc(-1 * var(--spacing-sm));
    }

    /* Status icon */
    .status-icon
    {
        width: 2.5rem;
        height: 2.5rem;
    }

    /* Benefits section */
    .pricing-section,
    .benefits-section
    {
        padding: var(--spacing) var(--spacing-sm);
    }

    /* Benefits section */
    .pricing-section h2,
    .benefits-section h2
    {
        font-size: var(--font-size-lg);
        margin-bottom: var(--spacing);
    }

    /* Plan card */
    .plan-card
    {
        padding: var(--spacing) var(--spacing-sm);
        width: 70%;
        margin: 0 auto;
    }

    /* Plan card */
    .plan-card h3
    {
        margin-bottom: var(--spacing-xs);
    }

    /* Plan duration */
    .plan-card .plan-duration
    {
        margin-bottom: var(--spacing-sm);
    }

    /* Plan icon */
    .plan-icon
    {
        width: 2.5rem;
        height: 2.5rem;
        margin-bottom: var(--spacing-xs);
    }

    /* Plan icon */
    .plan-icon i
    {
        font-size: var(--font-size-lg);
    }

    /* Plan price */
    .plan-price
    {
        font-size: var(--font-size-xl);
        margin-bottom: var(--spacing-sm);
    }

    /* Plan features */
    .plan-features
    {
        gap: var(--gap-xs);
        margin-bottom: var(--spacing-sm);
    }

    /* Plan features */
    .plan-features i
    {
        min-width: 1rem;
    }

    /* Faq section */
    .faq-section h2
    {
        margin-bottom: var(--spacing);
        font-size: var(--font-size-lg);
    }

    /* Benefit card */
    .benefit-card
    {
        padding: var(--spacing-sm);
        width: 100%;
    }

    /* Benefit card */
    .benefit-card p
    {
        font-size: var(--font-size-sm);
    }

    /* Benefit icon */
    .benefit-icon
    {
        width: 3rem;
        height: 3rem;
    }

    /* Benefit icon */
    .benefit-icon i
    {
        font-size: var(--font-size-xl);
    }

    /* Pricing footer */
    .pricing-footer
    {
        padding: var(--spacing) var(--spacing-sm);
    }

    /* Pricing footer */
    .pricing-footer p
    {
        font-size: var(--font-size-sm);
    }

}