/* ==========================================================================
   TARJETA DE PLAN

   Componente compartido por la portada y la pantalla de planes. Vive aparte
   porque las dos lo usan: duplicarlo en cada hoja de página hacía que un
   retoque se aplicara en una y no en la otra.

   Es una tarjeta de precio, no un panel: la proporción vertical es lo que
   permite compararlas de un vistazo. El fondo va blanco porque el color lo
   ponen las piezas de dentro —el distintivo, las pastillas de los iconos, el
   botón— y el monto necesita el máximo contraste detrás, que es lo que se
   compara entre tarjetas.

   Usa las variables globales de `base/_variables.css`, no las de una hoja de
   página, para que se vea igual en cualquier pantalla que lo enlace.
   ========================================================================== */
.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.5rem 1.5rem;
    background: var(--fe-bg-white);
    border: 1px solid #e2e8f0;
    border-radius: var(--fe-border-radius-xl);
    box-shadow: var(--fe-shadow-sm);
    transition: border-color var(--fe-transition), box-shadow var(--fe-transition);
}

    /* Al pasar por encima la tarjeta toma el mismo verde con el que se marca el
       plan destacado: es el color con el que se señala la tarjeta que tiene la
       atención. */
    .plan-card:hover {
        border-color: var(--fe-primary);
        box-shadow: 0 10px 30px -12px rgba(127, 190, 65, 0.45);
    }

.plan-card--popular {
    border-color: var(--fe-primary);
    box-shadow: 0 10px 30px -12px rgba(127, 190, 65, 0.35);
}

/* Distintivo del plan destacado. Va montado sobre el borde superior para no
   empujar el nombre y desalinear las tarjetas de la fila. */
.plan-card__badge {
    position: absolute;
    top: -11px;
    left: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    background: #fbf1de;
    border: 1px solid #f0dfc0;
    border-radius: var(--fe-border-radius-pill);
    color: #8a5a18;
    font-family: var(--fe-font-primary);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    z-index: 2;
}

    .plan-card__badge i {
        font-size: 0.6rem;
    }

/* Alto mínimo de dos líneas: mantiene alineado el precio de todas las tarjetas
   de la fila aunque los nombres midan distinto. */
.plan-card__name {
    min-height: 3rem;
    margin: 0;
    font-family: var(--fe-font-primary);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--fe-secondary);
    line-height: 1.25;
}

/* El precio se compone en una línea: moneda discreta, cifra grande y periodo al
   lado, para que la vista caiga en el número. */
.plan-card__pricing {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0.625rem 0 0;
}

.plan-card__currency {
    font-family: var(--fe-font-primary);
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
}

.plan-card__amount {
    font-family: var(--fe-font-primary);
    font-size: 2.125rem;
    font-weight: 800;
    color: var(--fe-secondary);
    line-height: 1;
    letter-spacing: -0.02em;
}

.plan-card__period {
    font-size: 0.875rem;
    color: #64748b;
}

.plan-card__note {
    margin: 0.375rem 0 0;
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.35;
}

/* Ficha del plan: etiqueta a la izquierda y valor a la derecha, que es lo que
   permite comparar dos planes recorriendo la misma columna. */
.plan-card__specs {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 1.125rem 0 0;
    border-top: 1px solid #eef1f4;
}

    .plan-card__specs li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.625rem;
        margin-bottom: 0.75rem;
    }

        .plan-card__specs li:last-child {
            margin-bottom: 0;
        }

.plan-card__spec-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #4a5566;
}

    /* El icono en su pastilla: da color a la ficha sin teñir el fondo, que tiene
       que quedar limpio detrás de las cifras. */
    .plan-card__spec-label i {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 7px;
        background: #eef1fb;
        color: var(--fe-secondary-light);
        font-size: 0.7rem;
    }

.plan-card__spec-value {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--fe-secondary);
    white-space: nowrap;
}

.plan-card__features {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}

    .plan-card__features li {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        font-size: 0.78rem;
        color: #64748b;
        line-height: 1.4;
    }

    .plan-card__features i {
        margin-top: 0.2rem;
        color: var(--fe-primary);
        font-size: 0.65rem;
    }

/* Aclaración comercial al pie de la ficha; la trae la configuración. */
.plan-card__disclaimer {
    margin: 1rem 0 0;
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.55;
}

    .plan-card__disclaimer strong {
        color: var(--fe-secondary);
        font-weight: 700;
    }

    .plan-card__disclaimer .plan-card__asterisk {
        color: var(--fe-primary);
        font-weight: 700;
    }

/* El pie se pega abajo para que el botón quede a la misma altura en todas las
   tarjetas, tengan o no características. */
.plan-card__action {
    display: flex;
    margin-top: auto;
    padding-top: 1.25rem;
}

/* En reposo azul, y al pasar el puntero pasa al verde de la marca, el mismo con
   el que se ilumina el borde de la tarjeta: el botón y la tarjeta responden
   juntos al puntero. */
.plan-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.8rem 1.25rem;
    background: var(--fe-secondary-light);
    border: none;
    border-radius: var(--fe-border-radius);
    color: #fff;
    font-family: var(--fe-font-primary);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--fe-transition);
}

    .plan-card__cta:hover {
        background: var(--fe-primary);
        color: #fff;
    }

    .plan-card__cta:focus-visible {
        outline: 2px solid var(--fe-secondary);
        outline-offset: 2px;
    }

/* ==========================================================================
   VARIANTE GRANDE

   La portada muestra solo dos planes en el ancho de la sección, así que la
   tarjeta dispone de casi el doble de sitio. Crece la tipografía, no la caja:
   estirar la misma tarjeta pequeña dejaba un bloque cuadrado con el texto
   perdido en el centro.
   ========================================================================== */
.plan-card--large {
    padding: 2.25rem 2rem 2rem;
}

    .plan-card--large .plan-card__badge {
        left: 2rem;
    }

    .plan-card--large .plan-card__name {
        min-height: 3.5rem;
        font-size: 1.5rem;
    }

    .plan-card--large .plan-card__currency {
        font-size: 1.125rem;
    }

    .plan-card--large .plan-card__amount {
        font-size: 3rem;
    }

    .plan-card--large .plan-card__period {
        font-size: 1rem;
    }

    .plan-card--large .plan-card__note {
        font-size: 0.85rem;
    }

    .plan-card--large .plan-card__specs {
        margin-top: 1.5rem;
        padding-top: 1.375rem;
    }

        .plan-card--large .plan-card__specs li {
            margin-bottom: 0.875rem;
        }

    .plan-card--large .plan-card__spec-label {
        font-size: 0.9375rem;
    }

        .plan-card--large .plan-card__spec-label i {
            width: 28px;
            height: 28px;
            font-size: 0.8rem;
        }

    .plan-card--large .plan-card__spec-value {
        font-size: 1rem;
    }

    .plan-card--large .plan-card__features li {
        font-size: 0.875rem;
    }

    .plan-card--large .plan-card__disclaimer {
        font-size: 0.85rem;
    }

    .plan-card--large .plan-card__cta {
        padding: 0.95rem 1.5rem;
        font-size: 1rem;
    }

/* ==========================================================================
   ENTRADA

   Las tarjetas aparecen escalonadas al pintarse la rejilla. Si el visitante
   pidió menos movimiento, se muestran ya colocadas.
   ========================================================================== */
.plan-card {
    opacity: 0;
    animation: planCardFadeInUp 0.5s ease forwards;
}

    .plan-card:nth-child(2) {
        animation-delay: 75ms;
    }

    .plan-card:nth-child(3) {
        animation-delay: 150ms;
    }

    .plan-card:nth-child(4) {
        animation-delay: 225ms;
    }

    .plan-card:nth-child(5) {
        animation-delay: 300ms;
    }

    .plan-card:nth-child(6) {
        animation-delay: 375ms;
    }

@keyframes planCardFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .plan-card {
        opacity: 1;
        animation: none;
    }
}

@media (max-width: 640px) {
    .plan-card__amount {
        font-size: 1.875rem;
    }

    .plan-card--large {
        padding: 1.75rem 1.5rem 1.5rem;
    }

        .plan-card--large .plan-card__badge {
            left: 1.5rem;
        }

        .plan-card--large .plan-card__name {
            font-size: 1.25rem;
        }

        .plan-card--large .plan-card__amount {
            font-size: 2.25rem;
        }
}